Didier Clerc
12 years ago
commit
59c0b73738
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 42 B |
|
After Width: | Height: | Size: 342 B |
|
After Width: | Height: | Size: 360 B |
|
After Width: | Height: | Size: 405 B |
|
After Width: | Height: | Size: 220 B |
|
After Width: | Height: | Size: 378 B |
|
After Width: | Height: | Size: 373 B |
|
After Width: | Height: | Size: 360 B |
|
After Width: | Height: | Size: 291 B |
|
After Width: | Height: | Size: 386 B |
|
After Width: | Height: | Size: 882 B |
@ -0,0 +1,433 @@ |
|||||||
|
div.olMap { |
||||||
|
z-index: 0; |
||||||
|
padding: 0 !important; |
||||||
|
margin: 0 !important; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
div.olMapViewport { |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
div.olLayerDiv { |
||||||
|
-moz-user-select: none; |
||||||
|
-khtml-user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
.olLayerGoogleCopyright { |
||||||
|
left: 2px; |
||||||
|
bottom: 2px; |
||||||
|
} |
||||||
|
.olLayerGoogleV3.olLayerGoogleCopyright { |
||||||
|
right: auto !important; |
||||||
|
} |
||||||
|
.olLayerGooglePoweredBy { |
||||||
|
left: 2px; |
||||||
|
bottom: 15px; |
||||||
|
} |
||||||
|
.olLayerGoogleV3.olLayerGooglePoweredBy { |
||||||
|
bottom: 15px !important; |
||||||
|
} |
||||||
|
.olControlAttribution { |
||||||
|
font-size: smaller; |
||||||
|
right: 3px; |
||||||
|
bottom: 4.5em; |
||||||
|
position: absolute; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.olControlScale { |
||||||
|
right: 3px; |
||||||
|
bottom: 3em; |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
font-size: smaller; |
||||||
|
} |
||||||
|
.olControlScaleLine { |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
left: 10px; |
||||||
|
bottom: 15px; |
||||||
|
font-size: xx-small; |
||||||
|
} |
||||||
|
.olControlScaleLineBottom { |
||||||
|
border: solid 2px black; |
||||||
|
border-bottom: none; |
||||||
|
margin-top:-2px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.olControlScaleLineTop { |
||||||
|
border: solid 2px black; |
||||||
|
border-top: none; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlPermalink { |
||||||
|
right: 3px; |
||||||
|
bottom: 1.5em; |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
font-size: smaller; |
||||||
|
} |
||||||
|
|
||||||
|
div.olControlMousePosition { |
||||||
|
bottom: 0em; |
||||||
|
right: 3px; |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
font-family: Arial; |
||||||
|
font-size: smaller; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlOverviewMapContainer { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlOverviewMapElement { |
||||||
|
padding: 10px 18px 10px 10px; |
||||||
|
background-color: #00008B; |
||||||
|
-moz-border-radius: 1em 0 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlOverviewMapMinimizeButton { |
||||||
|
right: 0; |
||||||
|
bottom: 80px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlOverviewMapMaximizeButton { |
||||||
|
right: 0; |
||||||
|
bottom: 80px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlOverviewMapExtentRectangle { |
||||||
|
overflow: hidden; |
||||||
|
background-image: url("img/blank.gif"); |
||||||
|
cursor: move; |
||||||
|
border: 2px dotted red; |
||||||
|
} |
||||||
|
.olControlOverviewMapRectReplacement { |
||||||
|
overflow: hidden; |
||||||
|
cursor: move; |
||||||
|
background-image: url("img/overview_replacement.gif"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
} |
||||||
|
|
||||||
|
.olLayerGeoRSSDescription { |
||||||
|
float:left; |
||||||
|
width:100%; |
||||||
|
overflow:auto; |
||||||
|
font-size:1.0em; |
||||||
|
} |
||||||
|
.olLayerGeoRSSClose { |
||||||
|
float:right; |
||||||
|
color:gray; |
||||||
|
font-size:1.2em; |
||||||
|
margin-right:6px; |
||||||
|
font-family:sans-serif; |
||||||
|
} |
||||||
|
.olLayerGeoRSSTitle { |
||||||
|
float:left;font-size:1.2em; |
||||||
|
} |
||||||
|
|
||||||
|
.olPopupContent { |
||||||
|
padding:5px; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlNavigationHistory { |
||||||
|
background-image: url("img/navigation_history.png"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
|
||||||
|
} |
||||||
|
.olControlNavigationHistoryPreviousItemActive { |
||||||
|
background-position: 0 0; |
||||||
|
} |
||||||
|
.olControlNavigationHistoryPreviousItemInactive { |
||||||
|
background-position: 0 -24px; |
||||||
|
} |
||||||
|
.olControlNavigationHistoryNextItemActive { |
||||||
|
background-position: -24px 0; |
||||||
|
} |
||||||
|
.olControlNavigationHistoryNextItemInactive { |
||||||
|
background-position: -24px -24px; |
||||||
|
} |
||||||
|
|
||||||
|
div.olControlSaveFeaturesItemActive { |
||||||
|
background-image: url(img/save_features_on.png); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: 0 1px; |
||||||
|
} |
||||||
|
div.olControlSaveFeaturesItemInactive { |
||||||
|
background-image: url(img/save_features_off.png); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: 0 1px; |
||||||
|
} |
||||||
|
|
||||||
|
.olHandlerBoxZoomBox { |
||||||
|
border: 2px solid red; |
||||||
|
position: absolute; |
||||||
|
background-color: white; |
||||||
|
opacity: 0.50; |
||||||
|
font-size: 1px; |
||||||
|
filter: alpha(opacity=50); |
||||||
|
} |
||||||
|
.olHandlerBoxSelectFeature { |
||||||
|
border: 2px solid blue; |
||||||
|
position: absolute; |
||||||
|
background-color: white; |
||||||
|
opacity: 0.50; |
||||||
|
font-size: 1px; |
||||||
|
filter: alpha(opacity=50); |
||||||
|
} |
||||||
|
|
||||||
|
.olControlPanPanel { |
||||||
|
top: 10px; |
||||||
|
left: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlPanPanel div { |
||||||
|
background-image: url(img/pan-panel.png); |
||||||
|
height: 18px; |
||||||
|
width: 18px; |
||||||
|
cursor: pointer; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlPanPanel .olControlPanNorthItemInactive { |
||||||
|
top: 0; |
||||||
|
left: 9px; |
||||||
|
background-position: 0 0; |
||||||
|
} |
||||||
|
.olControlPanPanel .olControlPanSouthItemInactive { |
||||||
|
top: 36px; |
||||||
|
left: 9px; |
||||||
|
background-position: 18px 0; |
||||||
|
} |
||||||
|
.olControlPanPanel .olControlPanWestItemInactive { |
||||||
|
position: absolute; |
||||||
|
top: 18px; |
||||||
|
left: 0; |
||||||
|
background-position: 0 18px; |
||||||
|
} |
||||||
|
.olControlPanPanel .olControlPanEastItemInactive { |
||||||
|
top: 18px; |
||||||
|
left: 18px; |
||||||
|
background-position: 18px 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlZoomPanel { |
||||||
|
top: 71px; |
||||||
|
left: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlZoomPanel div { |
||||||
|
background-image: url(img/zoom-panel.png); |
||||||
|
position: absolute; |
||||||
|
height: 18px; |
||||||
|
width: 18px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlZoomPanel .olControlZoomInItemInactive { |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
background-position: 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlZoomPanel .olControlZoomToMaxExtentItemInactive { |
||||||
|
top: 18px; |
||||||
|
left: 0; |
||||||
|
background-position: 0 -18px; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlZoomPanel .olControlZoomOutItemInactive { |
||||||
|
top: 36px; |
||||||
|
left: 0; |
||||||
|
background-position: 0 18px; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* When a potential text is bigger than the image it move the image |
||||||
|
* with some headers (closes #3154) |
||||||
|
*/ |
||||||
|
.olControlPanZoomBar div { |
||||||
|
font-size: 1px; |
||||||
|
} |
||||||
|
|
||||||
|
.olPopupCloseBox { |
||||||
|
background: url("img/close.gif") no-repeat; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.olFramedCloudPopupContent { |
||||||
|
padding: 5px; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlNoSelect { |
||||||
|
-moz-user-select: none; |
||||||
|
-khtml-user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
.olImageLoadError { |
||||||
|
background-color: pink; |
||||||
|
opacity: 0.5; |
||||||
|
filter: alpha(opacity=50); /* IE */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Cursor styles |
||||||
|
*/ |
||||||
|
|
||||||
|
.olCursorWait { |
||||||
|
cursor: wait; |
||||||
|
} |
||||||
|
.olDragDown { |
||||||
|
cursor: move; |
||||||
|
} |
||||||
|
.olDrawBox { |
||||||
|
cursor: crosshair; |
||||||
|
} |
||||||
|
.olControlDragFeatureOver { |
||||||
|
cursor: move; |
||||||
|
} |
||||||
|
.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown { |
||||||
|
cursor: -moz-grabbing; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Layer switcher |
||||||
|
*/ |
||||||
|
.olControlLayerSwitcher { |
||||||
|
position: absolute; |
||||||
|
top: 25px; |
||||||
|
right: 0; |
||||||
|
width: 20em; |
||||||
|
font-family: sans-serif; |
||||||
|
font-weight: bold; |
||||||
|
margin-top: 3px; |
||||||
|
margin-left: 3px; |
||||||
|
margin-bottom: 3px; |
||||||
|
font-size: smaller; |
||||||
|
color: white; |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlLayerSwitcher .layersDiv { |
||||||
|
padding-top: 5px; |
||||||
|
padding-left: 10px; |
||||||
|
padding-bottom: 5px; |
||||||
|
padding-right: 75px; |
||||||
|
background-color: darkblue; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlLayerSwitcher .layersDiv .baseLbl, |
||||||
|
.olControlLayerSwitcher .layersDiv .dataLbl { |
||||||
|
margin-top: 3px; |
||||||
|
margin-left: 3px; |
||||||
|
margin-bottom: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlLayerSwitcher .layersDiv .baseLayersDiv, |
||||||
|
.olControlLayerSwitcher .layersDiv .dataLayersDiv { |
||||||
|
padding-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.olControlLayerSwitcher .maximizeDiv, |
||||||
|
.olControlLayerSwitcher .minimizeDiv { |
||||||
|
top: 5px; |
||||||
|
right: 0; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.olBingAttribution { |
||||||
|
color: #DDD; |
||||||
|
} |
||||||
|
.olBingAttribution.road { |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.olGoogleAttribution.hybrid, .olGoogleAttribution.satellite { |
||||||
|
color: #EEE; |
||||||
|
} |
||||||
|
.olGoogleAttribution { |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
span.olGoogleAttribution a { |
||||||
|
color: #77C; |
||||||
|
} |
||||||
|
span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a { |
||||||
|
color: #EEE; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Editing and navigation icons. |
||||||
|
* (using the editing_tool_bar.png sprint image) |
||||||
|
*/ |
||||||
|
.olControlNavToolbar , |
||||||
|
.olControlEditingToolbar { |
||||||
|
margin: 5px 5px 0 0; |
||||||
|
} |
||||||
|
.olControlNavToolbar div, |
||||||
|
.olControlEditingToolbar div { |
||||||
|
background-image: url("img/editing_tool_bar.png"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
margin: 0 0 5px 5px; |
||||||
|
width: 24px; |
||||||
|
height: 22px; |
||||||
|
cursor: pointer |
||||||
|
} |
||||||
|
/* positions */ |
||||||
|
.olControlEditingToolbar { |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
.olControlNavToolbar { |
||||||
|
top: 295px; |
||||||
|
left: 9px; |
||||||
|
} |
||||||
|
/* layouts */ |
||||||
|
.olControlEditingToolbar div { |
||||||
|
float: right; |
||||||
|
} |
||||||
|
/* individual controls */ |
||||||
|
.olControlNavToolbar .olControlNavigationItemInactive, |
||||||
|
.olControlEditingToolbar .olControlNavigationItemInactive { |
||||||
|
background-position: -103px -1px; |
||||||
|
} |
||||||
|
.olControlNavToolbar .olControlNavigationItemActive , |
||||||
|
.olControlEditingToolbar .olControlNavigationItemActive { |
||||||
|
background-position: -103px -24px; |
||||||
|
} |
||||||
|
.olControlNavToolbar .olControlZoomBoxItemInactive { |
||||||
|
background-position: -128px -1px; |
||||||
|
} |
||||||
|
.olControlNavToolbar .olControlZoomBoxItemActive { |
||||||
|
background-position: -128px -24px; |
||||||
|
} |
||||||
|
.olControlEditingToolbar .olControlDrawFeaturePointItemInactive { |
||||||
|
background-position: -77px -1px; |
||||||
|
} |
||||||
|
.olControlEditingToolbar .olControlDrawFeaturePointItemActive { |
||||||
|
background-position: -77px -24px; |
||||||
|
} |
||||||
|
.olControlEditingToolbar .olControlDrawFeaturePathItemInactive { |
||||||
|
background-position: -51px -1px; |
||||||
|
} |
||||||
|
.olControlEditingToolbar .olControlDrawFeaturePathItemActive { |
||||||
|
background-position: -51px -24px; |
||||||
|
} |
||||||
|
.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{ |
||||||
|
background-position: -26px -1px; |
||||||
|
} |
||||||
|
.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive { |
||||||
|
background-position: -26px -24px; |
||||||
|
} |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||||
|
<widget xmlns="http://www.w3.org/ns/widgets" |
||||||
|
id="OSM" |
||||||
|
version="0.1" |
||||||
|
width="800" |
||||||
|
height="600" |
||||||
|
ub:resizable="true" |
||||||
|
ub:roles="content"> |
||||||
|
<name>OpenStreetMap</name> |
||||||
|
<author href="http://icap.univ-lyon1.fr/" |
||||||
|
email="guillaume.burel@etu.univ-lyon1.fr">Guillaume Burel - Université Claude Bernard Lyon 1 (ICAP), Délégation Interministérielle à l'Éducation Numérique en Afrique</author> |
||||||
|
<description>View maps in OpenStreetMap<description> |
||||||
|
<content src="index.html"/> |
||||||
|
</widget> |
||||||
|
After Width: | Height: | Size: 149 KiB |
@ -0,0 +1,221 @@ |
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||||
|
<head> |
||||||
|
<title>Open Street Map</title> |
||||||
|
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> |
||||||
|
<style type="text/css" media="all"> |
||||||
|
html, body, #map { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
margin: 0; |
||||||
|
position: relative; |
||||||
|
z-index: 0; |
||||||
|
font-family: sans-serif; |
||||||
|
} |
||||||
|
#search_form { |
||||||
|
position: absolute; |
||||||
|
z-index: 1; |
||||||
|
bottom: 2.5em; |
||||||
|
right: 0.5em; |
||||||
|
} |
||||||
|
#layout_switch { |
||||||
|
position: absolute; |
||||||
|
bottom: 15px; |
||||||
|
left: 140px; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
#layout_switch a { |
||||||
|
color: black; |
||||||
|
} |
||||||
|
#layout_switch a:visited { |
||||||
|
color: black; |
||||||
|
} |
||||||
|
#layout_switch a:hover { |
||||||
|
color: white; |
||||||
|
background-color: black; |
||||||
|
opacity: 0.5; |
||||||
|
} |
||||||
|
.olControlPanZoom { |
||||||
|
top: auto !important; |
||||||
|
bottom: 173px; /* .olControlScaleLine.bottom = 15 + .olControlScaleLine.bottom = 26 + margin = 15px + #OpenLayers.Control.PanZoom_5_zoomout = 99 + #OpenLayers.Control.PanZoom_5_zoomout = 18 */ |
||||||
|
} |
||||||
|
.olControlAttribution { |
||||||
|
right: 0.5em !important; |
||||||
|
bottom: 15px !important; |
||||||
|
} |
||||||
|
</style> |
||||||
|
<script src="api/OpenLayers.js" type="text/javascript"></script> |
||||||
|
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> |
||||||
|
<script type="text/javascript"> |
||||||
|
<!-- |
||||||
|
|
||||||
|
/* |
||||||
|
* OpenStreetMap Widget |
||||||
|
* ========================================================== |
||||||
|
* Copyright (C) Université Claude Bernard Lyon 1 (ICAP), Délégation Interministérielle à l'Éducation Numérique en Afrique, Guillaume Burel, 2012 |
||||||
|
* |
||||||
|
* This program is free software: you can redistribute it and/or modify |
||||||
|
* it under the terms of the GNU General Public License as published by |
||||||
|
* the Free Software Foundation, either version 3 of the License, or |
||||||
|
* (at your option) any later version. |
||||||
|
* |
||||||
|
* This program is distributed in the hope that it will be useful, |
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||||
|
* GNU General Public License for more details. |
||||||
|
* |
||||||
|
* You should have received a copy of the GNU General Public License |
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||||
|
*/ |
||||||
|
|
||||||
|
/* API identifier */ |
||||||
|
var geonamesUser = "yimgo"; |
||||||
|
|
||||||
|
/* map variable will be used to manipulate the map. This will be initialized like an OpenLayers.Map object. */ |
||||||
|
var map; |
||||||
|
|
||||||
|
/* updateMap() allow user to modify the considered zone, in case a change has been requested (e.g. user request) */ |
||||||
|
function updateMap(coordinates) { |
||||||
|
/* transforming given coordinates, which have to be expressed in WGS-1984 projection, to map's projection */ |
||||||
|
var position = new OpenLayers.LonLat(coordinates["lng"], coordinates["lat"]).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); |
||||||
|
/* centering in position with given zoom */ |
||||||
|
map.setCenter(position, coordinates["zoom"]); |
||||||
|
} |
||||||
|
|
||||||
|
/* doSearch() performs the request to geonames server with the given query, and updates the map in case of success. */ |
||||||
|
function doSearch(query) { |
||||||
|
/* performing request with JSON API from geonames and global username (identifying request's author). Asking for only one result, to save resources and to allow the user to avoid a choice when doing the research. */ |
||||||
|
$.ajax({ |
||||||
|
url: "http://api.geonames.org/searchJSON", |
||||||
|
dataType: 'json', |
||||||
|
data: { |
||||||
|
q: encodeURIComponent(query), |
||||||
|
maxRows: "1", |
||||||
|
username: geonamesUser |
||||||
|
}, |
||||||
|
success: function(data) { |
||||||
|
/* updating the map if response is ok */ |
||||||
|
if (typeof data["geonames"][0]!= 'undefined') { |
||||||
|
var coordinates = new Array(); |
||||||
|
coordinates["lng"] = data["geonames"][0].lng; |
||||||
|
coordinates["lat"] = data["geonames"][0].lat; |
||||||
|
|
||||||
|
/* if position represents a country, setting the zoom to 6 */ |
||||||
|
if (data["geonames"][0].fcl == "A") |
||||||
|
coordinates["zoom"] = 6; |
||||||
|
else |
||||||
|
coordinates["zoom"] = 12; |
||||||
|
|
||||||
|
updateMap(coordinates); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* doNominatim() could use Nominatim API (http://wiki.openstreetmap.org/wiki/Nominatim). |
||||||
|
* It is not used because first result is not always pertinent and we want to avoid user to make a choice after his request. |
||||||
|
* Bounding box info provided by Nominatim could be a good way to set the right zoom for request (instead of having a determined zoom for countries and cities). |
||||||
|
* Nominatim allows user (the developer in this case) to set the language to display informations provided in sankoré user native language. |
||||||
|
*/ |
||||||
|
function doNominatim(query) { |
||||||
|
$.ajax({ |
||||||
|
url: "http://nominatim.openstreetmap.org/search", |
||||||
|
dataType: "json", |
||||||
|
data: { |
||||||
|
q: query, |
||||||
|
format: "json", |
||||||
|
limit: "10", |
||||||
|
addressdetails: "1" |
||||||
|
}, |
||||||
|
success: function(data) { |
||||||
|
/* updating the map if response is ok */ |
||||||
|
if (typeof data[0]!= 'undefined') { |
||||||
|
var coordinates = new Array(); |
||||||
|
coordinates["lng"] = data[0].lon; |
||||||
|
coordinates["lat"] = data[0].lat; |
||||||
|
|
||||||
|
/* if position represents a city, setting the zoom to 12 */ |
||||||
|
if (data[0].address.state) |
||||||
|
coordinates["zoom"] = 12; |
||||||
|
else |
||||||
|
coordinates["zoom"] = 6; |
||||||
|
|
||||||
|
updateMap(coordinates); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
window.onload = function() { |
||||||
|
map = new OpenLayers.Map({ |
||||||
|
div: "map" |
||||||
|
}); |
||||||
|
|
||||||
|
/* limiting max zoom, by overriding OpenLayers.Map::moveTo function */ |
||||||
|
map.newMoveTo = map.moveTo; |
||||||
|
map.moveTo = function(lonlat, zoom, options) { |
||||||
|
return(zoom >= 0 && zoom <= 17) ? map.newMoveTo(lonlat,zoom,options) : false; |
||||||
|
}; |
||||||
|
|
||||||
|
/* Standard layer */ |
||||||
|
classic = new OpenLayers.Layer.OSM("Classic"); |
||||||
|
|
||||||
|
/* avoiding out of bounds requests */ |
||||||
|
classic.displayOutsideMaxExtent = false; |
||||||
|
|
||||||
|
/* Landscape layer */ |
||||||
|
relief = new OpenLayers.Layer.OSM("Relief", [ |
||||||
|
'http://a.tile3.opencyclemap.org/landscape/${z}/${x}/${y}.png', |
||||||
|
'http://b.tile3.opencyclemap.org/landscape/${z}/${x}/${y}.png', |
||||||
|
'http://c.tile3.opencyclemap.org/landscape/${z}/${x}/${y}.png' |
||||||
|
]); |
||||||
|
relief.displayOutsideMaxExtent = false; |
||||||
|
|
||||||
|
/* then adding layers to the map */ |
||||||
|
map.addLayers([classic, relief]); |
||||||
|
|
||||||
|
/* displaying scale line, allowing user to represent distances */ |
||||||
|
map.addControl(new OpenLayers.Control.ScaleLine()); |
||||||
|
|
||||||
|
/* then zomming to get a better overview of the worldmap */ |
||||||
|
map.zoomTo(2); |
||||||
|
|
||||||
|
/* doSearch is called when form is submitted */ |
||||||
|
$("#search_form").submit(function (event) { |
||||||
|
doSearch($("#query").val()); |
||||||
|
return false; |
||||||
|
}); |
||||||
|
|
||||||
|
/* allowing user to simply switch between classic and relief layers */ |
||||||
|
$("#layout_switch > a").click(function (event) { |
||||||
|
newLayer = $(this).text() == "Relief" ? relief : classic; |
||||||
|
newText = $(this).text() == "Relief" ? "Classic" : "Relief"; |
||||||
|
|
||||||
|
$(this).text(newText); |
||||||
|
map.setBaseLayer(newLayer); |
||||||
|
|
||||||
|
return false; |
||||||
|
}); |
||||||
|
}; |
||||||
|
--> |
||||||
|
</script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="map"> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="layout_switch"> |
||||||
|
<a href="#">Relief</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
<form method="post" id="search_form" action="#" accept-charset="UTF-8"> |
||||||
|
<p> |
||||||
|
<input type="text" value="" tabindex="1" id="query" /> |
||||||
|
<input type="submit" value="Go" /> |
||||||
|
</p> |
||||||
|
</form> |
||||||
|
</body> |
||||||
|
</html> |
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue