Created
July 6, 2011 16:31
-
-
Save wboykinm/1067673 to your computer and use it in GitHub Desktop.
A javascript geocoder piggybacked on the GeoDjango Admin Project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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