Skip to content

Instantly share code, notes, and snippets.

@wboykinm
Created July 6, 2011 16:31
Show Gist options
  • Save wboykinm/1067673 to your computer and use it in GitHub Desktop.
Save wboykinm/1067673 to your computer and use it in GitHub Desktop.
A javascript geocoder piggybacked on the GeoDjango Admin Project
{% block extrastyle %}
<style type="text/css">
#{{ id }}_map { width: {{ map_width }}px; height: {{ map_height }}px; }
#{{ id }}_map .aligned label { float:inherit; }
#{{ id }}_admin_map { position: relative; vertical-align: top; float: {{ LANGUAGE_BIDI|yesno:"right,left" }}; }
{% if not display_wkt %}#{{ id }} { display: none; }{% endif %}
.olControlEditingToolbar .olControlModifyFeatureItemActive {
background-image: url("{{ ADMIN_MEDIA_PREFIX }}img/gis/move_vertex_on.png");
background-repeat: no-repeat;
}
.olControlEditingToolbar .olControlModifyFeatureItemInactive {
background-image: url("{{ ADMIN_MEDIA_PREFIX }}img/gis/move_vertex_off.png");
background-repeat: no-repeat;
}
</style>
<!--[if IE]>
<style type="text/css">
/* This fixes the mouse offset issues in IE. */
#{{ id }}_admin_map { position: static; vertical-align: top; }
/* `font-size: 0` fixes the 1px border between tiles, but borks LayerSwitcher.
Thus, this is disabled until a better fix is found.
#{{ id }}_map { width: {{ map_width }}px; height: {{ map_height }}px; font-size: 0; } */
</style>
<![endif]-->
{% endblock %}
<span id="{{ id }}_admin_map">
<script type="text/javascript">
//<![CDATA[
{% block openlayers %}{% include "gis/admin/openlayers.js" %}{% endblock %}
//]]>
var geoCodeURL = "http://nominatim.openstreetmap.org/search";
var zoomToPlace = function() {
var address = document.getElementsByName("geocoder")[0].value;
if (!address)
alert("Please type an address or location!");
else {
//begin geocoder (https://gist.github.com/836127)
// Pass user input to nominatim
$("#address").autocomplete({
source: function ( request, response ) {
$.ajax({
url: geoCodeURL,
data: {
format: "json",
q: request.term
},
//Receive result including lat, lon
success: function ( data ) {
response ( $.map( data, function( item ) {
return {
label: item.display_name,
value: item.display_name,
lat: item.lat,
lon: item.lon
}}));
}
})
},
minLength: 2,
delay: 200,
select: function ( event, ui ) {
//transform results and reset map center
map.setCenter(
new OpenLayers.LonLat( ui.item.lon, ui.item.lat).transform(
new OpenLayers.Projection("EPSG:4326"),
// or new OpenLayers.Projection("EPSG:900913")
map.getProjectionObject()
), 13);
},
// open: function () {
// $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top");
// },
// close: function () {
// $( this ).removeClass( "ui-corner-top").addClass("ui-corner-all");
// }
});
});
//end inserted code (https://gist.github.com/836127)
}
}
</script>
<p>Zoom to Address:
<input id="{{ id }}_geocoder" name="geocoder" value="" onchange="zoomToPlace()">
<button type="button" onclick="zoomToPlace()" >Go!</button>
</p>
<div id="{{ id }}_map"{% if LANGUAGE_BIDI %} dir="ltr"{% endif %}></div>
<a href="javascript:{{ module }}.clearFeatures()">Delete all Features</a>
{% if display_wkt %}<p> WKT debugging window:</p>{% endif %}
<textarea id="{{ id }}" class="vWKTField required" cols="150" rows="10" name="{{ name }}">{{ wkt }}</textarea>
<script type="text/javascript">{% block init_function %}{{ module }}.init();{% endblock %}</script>
</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment