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