10#map#mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/powerpoints/chapter_10_mashups.pdf ·...
TRANSCRIPT
![Page 1: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/1.jpg)
10 Map Mashups
Mapping in the Cloud Peterson
![Page 2: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/2.jpg)
Basic Map
![Page 3: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/3.jpg)
<html> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize(){ var latlng = new google.maps.LatLng(46.810928, -90.817981); var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("map_canvas"),myOptions); } </script> <title></title> </head> <body onload="initialize()"> <div id="map_canvas" style="width:600px; height:300px"> </div> </body></html>
Link to GoogleMaps API
Size of mapin pixels
ROADMAP, HYBRIDOR SATELLITE
Zoom level:0-20
LatitudeLongitude
Basic Map
![Page 4: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/4.jpg)
With Marker
![Page 5: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/5.jpg)
<script type="text/javascript"> var map; function initialize(){ var myLatlng = new google.maps.LatLng(46.810928, -90.817981); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: "Hello World!" }); google.maps.event.addListener(marker, 'click', function(){ map.setZoom(17); }); }</script>
LatitudeLongitude
ROADMAP, HYBRIDOR SATELLITE
Zoom level:0-20
Define marker
Text formarker
New zoom levelafter click
With Marker
![Page 6: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/6.jpg)
Clickable Marker
![Page 7: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/7.jpg)
function initialize(){ var myLatlng = new google.maps.LatLng(41.258531, -96.012599); var myOptions = { //this defines the zoom level zoom: 14, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var contentString = 'Cartography & GIS Laboratory <br> University of Nebraska at Omaha' var infowindow = new google.maps.InfoWindow(content: contentString}); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: "Cartography and GIS Laboratory" }); google.maps.event.addListener(marker, 'click', function(){ infowindow.open(map, marker); });}
LatitudeLongitude
Zoom level:0-20 ROADMAP, HYBRID
OR SATELLITE
Define marker
Text formarker
Text forInfowindow
Add “Listener”to marker
Clickable Marker
![Page 8: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/8.jpg)
Basic Bing
![Page 9: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/9.jpg)
Basic Bing
<html> <head> <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"> </script> <script type="text/javascript"> function GetMap(){ var mapOptions = { credentials: "AmnzJW8uTvn19E0NiZ7Gx5qxrnm_oQB9zKZw2mIJ0kw6D9dPqwivr4_7WGHCZZgh", center: new Microsoft.Maps.Location(28.950025, -81.304865), mapTypeId: Microsoft.Maps.MapTypeId.road, zoom: 13, showScalebar: false } var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions); } </script> </head> <body onload="GetMap();"> <div id='mapDiv' style="position:relative; width:700px; height:300px;"> </div> </body></html>
Call to BingMaps API
LatitudeLongitude
road, aerial, or birdseye
Size of mapin pixels
Bing Maps Key freefrom Microsoft
![Page 10: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/10.jpg)
Bing Marker
![Page 11: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/11.jpg)
function GetMap(){ map = new Microsoft.Maps.Map(document.getElementById("myMap"), { credentials: "AmnzJW8uTvn19E0NiZ7Gx5qxrnm_oQB9zKZw2mIJ0kw6D9dPqwivr4_7WGHCZZgh"}); var loc = new Microsoft.Maps.Location(41.258531, -96.012599); var pin = new Microsoft.Maps.Pushpin(loc); map.entities.push(pin);
map.setView({ center: loc, zoom: 15 }); }
Bing Maps Key freefrom Microsoft
LatitudeLongitudeAdd pin
to map
Center mapon Pushpin
Bing Marker
![Page 12: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/12.jpg)
Bing Marker Info
![Page 13: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/13.jpg)
Bing Marker Info function GetMap(){ map = new Microsoft.Maps.Map(document.getElementById("myMap"), { credentials: "AjPEInnalw4KLza4VYB3gO6IbyZJ0r-J6P9W1qRjDShZYeMdPuSYEblFfr1ellgF"}); var loc = new Microsoft.Maps.Location(48.501924, 14.078808); map.setView({ center: loc, zoom: 15}); var pin = new Microsoft.Maps.Pushpin(loc, {text: '1'}); pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), { title: 'St. Peter am Wimberg', description: 'In the middle of nowhere', visible: false, offset: new Microsoft.Maps.Point(0, 15)}); Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox); Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox); map.entities.push(pin); map.entities.push(pinInfobox); }
Text for insideof Pushpin
Infobox forPushpin
Handler forclick event
Hide infobox ifmap is moved
Initially invisible
Add pinand infobox
to map
![Page 14: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/14.jpg)
Bing Marker Hover
![Page 15: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/15.jpg)
Bing Marker Hover function displayInfobox(e){ stopInfoboxTimer(e); var pin = e.target; if (pin != null) { var location = pin.getLocation(); var options = { id: 'infoBox1', title: 'Cartography & GIS Laboratory', description: 'University of Nebraska at Omaha', height: 90, width: 240, visible: true, showPointer: true, showCloseButton: true, offset: new MM.Point(0, pin.getHeight()), zIndex: 999 }; if (pinInfobox != null) { map.entities.remove(pinInfobox); if (MM.Events.hasHandler(pinInfobox, 'mouseleave')) MM.Events.removeHandler(pinInfobox.mouseLeaveHandler); if (MM.Events.hasHandler(pinInfobox, 'mouseenter')) MM.Events.removeHandler(pinInfobox.mouseEnterHandler); pinInfobox = null; } pinInfobox = new MM.Infobox(location, options); pinInfobox.mouseLeaveHandler = MM.Events.addHandler(pinInfobox, 'mouseleave', pinInfoboxMouseLeave); pinInfobox.mouseEnterHandler = MM.Events.addHandler(pinInfobox, 'mouseenter', pinInfoboxMouseEnter); map.entities.push(pinInfobox); } }
Text for insideof Infobox
Parametersfor Infobox
Handle mouseenter/mouseleave events
Is not equal to
After event,return to null
![Page 16: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/16.jpg)
Nokia Here
![Page 17: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/17.jpg)
Nokia Here
Get DOMfor the map
Provide key touse Nokia HERE
Add pan/zoombehavior
<script type="text/javascript" id="exampleJsSource"> nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); var mapContainer = document.getElementById("mapContainer"); var map = new nokia.maps.map.Display(mapContainer, { center: [52.51, 13.4], zoomLevel: 10, components: [new nokia.maps.map.component.Behavior()] });</script>
![Page 18: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/18.jpg)
Nokia Marker
![Page 19: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/19.jpg)
Nokia Marker
<script type="text/javascript" id="exampleJsSource"> nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); var mapContainer = document.getElementById("mapContainer"); var map = new nokia.maps.map.Display(mapContainer, {
center: [52.51, 13.4], zoomLevel: 10, components: [new nokia.maps.map.component.Behavior()] }); var standardMarker = new nokia.maps.map.StandardMarker(map.center); map.objects.add(standardMarker);
</script>
Get DOMfor the map
Provide key touse Nokia API
Add pan/zoombehavior
Add marker atmap center
Put markerin map object
![Page 20: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/20.jpg)
Nokia Styled Markers
![Page 21: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/21.jpg)
Nokia Styled Markers var standardMarkerProps = [null, { text: "42", brush: {color: "#F80"}}, {
text: "@", brush: {color: "#F80"}, textPen: {strokeColor: "#333"}}, {
text: "Hi", textPen: {strokeColor: "#333"}, brush: {color: "#FFF"}, pen: {strokeColor: "#333"}}], i = 4; while (i--) map.objects.add(new nokia.maps.map.StandardMarker( map.center.walk(360 / standardMarkerProps.length * i, 6000), standardMarkerProps[i]));</script>
Counter goesbackwards
3rd marker
Places markersaround middle
1st marker withnull properties
2nd marker
4th marker
Number of markers
![Page 22: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/22.jpg)
Nokia Text Markers
![Page 23: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/23.jpg)
Nokia Text Markers
var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate (52.520816, 13.409417), "Fernsehturm", 106, 24, { brush: { color: "#00000088" }, pen: { strokeColor: "#FFF", strokeWidth: 1 }, textPen: { strokeColor: "#FFF", fontSize: 16, fontFamily: "sans-serif", offsetX: 8, offsetY: 17 } }); markersContainer.objects.addAll([brandenbugerTorTextMarker, fernsehturmTextMarker]);
Text markerlocation
Add to mapcontainer
Height of text box
Text formarker
Width oftext box
Font settings
![Page 24: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/24.jpg)
MapQuest Basic
![Page 25: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/25.jpg)
MapQuest Basic <script type="text/javascript"> MQA.EventUtil.observe(window, 'load', function(){ /*Create an object for options*/ var options = { elt: document.getElementById('map'), zoom: 10, latLng: { lat: 39.743943, lng: -105.020089}, mtype: 'map', bestFitMargin: 0, zoomOnDoubleClick: true }; window.map = new MQA.TileMap(options); });</script>
Hooks into thewindow load event
Double-clickto zoom-in
Map type
Zoom leveland center
Attach optionsto map
![Page 26: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/26.jpg)
MapQuest controls
![Page 27: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/27.jpg)
MapQuest controls
window.map = new MQA.TileMap(options);
MQA.withModule('largezoom', function() { map.addControl( new MQA.LargeZoom(), new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5)) );});
Create anoptions object
Add a largezoom control
Place zoom control at top left
Distance in pixelsfrom top left
![Page 28: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/28.jpg)
MapQuest Marker
![Page 29: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/29.jpg)
MapQuest Marker
window.map = new MQA.TileMap(options); var basic = new MQA.Poi({ lat: 39.743943, lng: -105.020089}); map.addShape(basic);
Create anoptions object
Lat/longof marker Add marker to map’s
shape collection
![Page 30: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/30.jpg)
MapQuest Line
![Page 31: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/31.jpg)
MapQuest Line
window.map = new MQA.TileMap(options);
MQA.withModule('shapes', function() { var line = new MQA.LineOverlay();
line.setShapePoints([39.633041, -105.318492, 39.847136, -104.674787]);
map.addShape(line);
Create anoptions object
Lat/long pairs for line,minimum two pairs
Add line to map’sshape collection
![Page 32: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/32.jpg)
OpenStreetMap Basic
![Page 33: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/33.jpg)
OpenStreetMap Basic
<script src="http://www.openlayers.org/api/OpenLayers.js"> </script><script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"> </script><script> function init(){ lat = 46.810928; lon = -90.817981; zoom = 15; projLonLat = new OpenLayers.Projection("EPSG:4326"); projMercator = new OpenLayers.Projection("EPSG:900913"); map = new OpenLayers.Map("demoMap"); map.addLayer(new OpenLayers.Layer.OSM.Mapnik()); map.setCenter(new OpenLayers.LonLat(lon, lat).transform(projLonLat, projMercator), zoom); }</script>
Both OpenLayers andOpenStreetMap APIs
SpecifyingWGS 84 coords Spherical
Mercator
Center &Zoom
TransformedOpenLayer map
![Page 34: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/34.jpg)
OpenStreetMap Controls
![Page 35: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/35.jpg)
OpenStreetMap Controls <script> function init(){ lat = 46.810928; lon = -90.817981; zoom = 15; projLonLat = new OpenLayers.Projection("EPSG:4326"); projMercator = new OpenLayers.Projection("EPSG:900913"); overviewMap = new OpenLayers.Control.OverviewMap(); scale = new OpenLayers.Control.ScaleLine(); scale.geodesic = true; geopos = new OpenLayers.Control.MousePosition(); geopos.displayProjection = projLonLat; geopos.numDigits = 4; geopos.granularity = 12; map = new OpenLayers.Map("demoMap", { theme: null, controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.Attribution(), new OpenLayers.Control.PanZoomBar(), scale, geopos, overviewMap ] }); map.addLayer(new OpenLayers.Layer.OSM.Mapnik()); map.setCenter(new OpenLayers.LonLat(lon,lat).transform(projLonLat,projMercator),zoom); overviewMap.maximizeControl(); }</script> Transformed
OpenLayer map
SpecifyingWGS 84 coords Spherical
Mercator
Navigation control
Overview map
Parametersfor position
Set direct panningvia mouse drag
Add scale
Attribution text
Scale bar
Control ofoverview map
Displays currentposition of mouse
Displayposition
Displayoverview
![Page 36: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/36.jpg)
OpenStreetMap Marker
![Page 37: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/37.jpg)
OpenStreetMap Marker
<script> var lat = 46.810928; var lon = -90.817981; var zoom = 15; var fromProjection = new OpenLayers.Projection("EPSG:4326"); var toProjection = new OpenLayers.Projection("EPSG:900913"); var position = new OpenLayers.LonLat(lon, lat).transform(fromProjection,toProjection); map = new OpenLayers.Map("Map"); var mapnik = new OpenLayers.Layer.OSM(); map.addLayer(mapnik); var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers); markers.addMarker(new OpenLayers.Marker(position)); map.setCenter(position, zoom);</script>
SpecifyingWGS 84 coords Spherical
Mercator
Defineposition Get OpenLayer
map
Add markerto center
![Page 38: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/38.jpg)
OpenStreetMap Markers
![Page 39: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/39.jpg)
function addMarker(layer, lon, lat, popupContentHTML, farbe) { var ll = new OpenLayers.LonLat(lon,lat).transform(map.displayProjection,map.projection); var data = {}; if(farbe=="rot"){ data.icon = new OpenLayers.Icon('mm_30_red.png', new OpenLayers.Size(18, 30), new OpenLayers.Pixel(-9, -30)); } if(farbe=="gelb"){ data.icon = new OpenLayers.Icon('osmgelb.gif', new OpenLayers.Size(18, 30), new OpenLayers.Pixel(-9, -30)); }
var feature = new OpenLayers.Feature(layer, ll, data); feature.closeBox = true; feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(200, 80) } ); feature.data.popupContentHTML = popupContentHTML; feature.data.overflow = "hidden"; var marker = new OpenLayers.Marker(ll,data.icon); marker.feature = feature; var markerClick = function(evt) { if (this.popup == null) { this.popup = this.createPopup(this.closeBox); map.addPopup(this.popup); this.popup.show(); } else { this.popup.toggle(); } OpenLayers.Event.stop(evt); }; marker.events.register("mousedown", feature, markerClick);
layer.addMarker(marker);}
Marker function
Color
If color is red
If color is yellow
Marker nameand size
Position relativeto lon & lat
Define pop-upwindow & size
Define pop-up
Click event
OpenStreetMap Markers
![Page 40: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/40.jpg)
OpenStreetMap Hover
![Page 41: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/41.jpg)
OpenStreetMap Hover var markerClick = function(evt) { if (this.popup == null) { this.popup = this.createPopup(this.closeBox); map.addPopup(this.popup); this.popup.show(); } else { this.popup.toggle(); } OpenLayers.Event.stop(evt); }; marker.events.register("mousedown", feature, markerClick);
marker.events.register("mouseover", feature, markerClick);
marker.events.register("mouseout", feature, markerClick);
layer.addMarker(marker);
MouseDownevent
MouseOverevent
MouseOut event
![Page 42: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/42.jpg)
Leaflet Markers
![Page 43: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/43.jpg)
Leaflet Markers <body> <div id="map" style="width: 700px; height: 300px"> </div> <script src="http://leafletjs.com/dist/leaflet.js"> </script> <script> var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ... }).addTo(map); L.marker([51.5, -0.09]).addTo(map).bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); L.circle([51.508, -0.11], 500, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map).bindPopup("I am a circle."); L.polygon([[51.509, -0.08], [51.503, -0.06], [51.51, -0.047]]).addTo(map).bindPopup("I am a polygon."); </script></body>
Get 28 KB Leaflet API Get CloudMade
OpenStreetMap TilesCenter &
zoom
Marker andpopup
Circle andpopup
Polygon andpopup
![Page 44: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/44.jpg)
Leaflet Custom Marker
![Page 45: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/45.jpg)
Leaflet Custom Marker <body>
<div id="map" style="width: 700px; height: 300px"></div>
<script src="http://leafletjs.com/dist/leaflet.js"></script><script> var map = L.map('map').setView([51.5, -0.09], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', { attribution: 'Map data © 2013 OpenStreetMap contributors', key: 'BC9A493B41014CAABB98F0471D759707' }).addTo(map);
var LeafIcon = L.Icon.extend({ options: { shadowUrl: 'http://leafletjs.com/docs/images/leaf-shadow.png', iconSize: [38, 95], shadowSize: [50, 64], iconAnchor: [22, 94], shadowAnchor: [4, 62], popupAnchor: [-3, -76] } });
var greenIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'}), redIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-red.png'}), orangeIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-orange.png'});
L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup("I am a green leaf.").addTo(map); L.marker([51.495, -0.083], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map); L.marker([51.49, -0.1], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);
</script></body>
Get 28 KB Leaflet API
Get one shadowfor all 3 icons
Link tothree icons
Put iconson map
![Page 46: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/46.jpg)
Leaflet Layers
![Page 47: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/47.jpg)
Leaflet Layers <script>
var cities = new L.LayerGroup();
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
var cmAttr = 'Map data © 2013 OpenStreetMap contributors', cmUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/...
var minimal = L.tileLayer(cmUrl, {styleId: 22677, attribution: cmAttr}), midnight = L.tileLayer(cmUrl, {styleId: 999, attribution: cmAttr}), motorways = L.tileLayer(cmUrl, {styleId: 46561, attribution: cmAttr});
var map = L.map('map', { center: [39.73, -104.99], zoom: 10,
layers: [minimal, motorways, cities]});
var baseLayers = { "Minimal": minimal, "Night View": midnight};
var overlays = { "Motorways": motorways, "Cities": cities};
L.control.layers(baseLayers, overlays).addTo(map);</script>
Put cities in“cities” layer
Basemap
Minimal, midnight &motorways layers
Object withbase layers
Object withoverlays
Create LayersControl
cities layer
![Page 48: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/48.jpg)
Leaflet Choropleth
![Page 49: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/49.jpg)
Leaflet Choropleth
var map = L.map('map').setView([37.8, -96], 4);
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png',{ attribution: 'Map data © 2013 OpenStreetMap contributors', key: 'BC9A493B41014CAABB98F0471D759707', styleId: 22677}).addTo(map);
var info = L.control();
info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div;};
info.update = function (props) { this._div.innerHTML = '<h4>US Population Density</h4>' + (props ? '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>' : 'Hover over a state');};info.addTo(map);
function getColor(d) { return d > 1000 ? '#800026' : d > 500 ? '#BD0026' : d > 200 ? '#E31A1C' : d > 100 ? '#FC4E2A' : d > 50 ? '#FD8D3C' : d > 20 ? '#FEB24C' : d > 10 ? '#FED976' : '#FFEDA0';}
function style(feature) { return { weight: 2, opacity: 1, color: 'white', dashArray: '3', fillOpacity: 0.7, fillColor: getColor(feature.properties.density)};}
Initial view Basemap
State infoon hover
Windowwith text
Color ofpolygons
Style ofbounding lines
![Page 50: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/50.jpg)
MapStracHon OpenLayers
![Page 51: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/51.jpg)
MapStracHon OpenLayers
<head> <title>Basic Mapstraction Map</title> <script src="http://openlayers.org/api/OpenLayers.js"></script> <script src="https://raw.github.com/mapstraction/mxn/master/source/mxn.js?(openlayers)" type="text/javascript"></script> <style type="text/css"> #map {
width: 700; height: 300px;}
</style>
<script type="text/javascript"> var mapstraction; function create_map() { mapstraction = new mxn.Mapstraction('mymap', 'openlayers'); mapstraction.setCenterAndZoom( new mxn.LatLonPoint(41.258531,-96.012599), 15); } </script> </head>
Center & ZoomLevel
Map size
MapStraction mapwith OpenLayers
Get MapStraction APIGet OpenLayers
API
![Page 52: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/52.jpg)
MapStracHon Google
![Page 53: 10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf · NokiaTextMarkers# var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate](https://reader030.vdocuments.mx/reader030/viewer/2022040706/5e06f39b9bb4b21bb95d4e2f/html5/thumbnails/53.jpg)
MapStracHon Google
<head> <title>Basic Mapstraction Map</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="https://raw.github.com/mapstraction/mxn/master/source/mxn.js?(googlev3)" type="text/javascript"></script> <style type="text/css"> #map { width: 700; height: 300px; } </style>
<script type="text/javascript"> var mapstraction; function create_map() { mapstraction = new mxn.Mapstraction('mymap', 'googlev3'); mapstraction.setCenterAndZoom( new mxn.LatLonPoint(41.258531,-96.012599), 15); } </script> </head>
Center & ZoomLevel
Map size
MapStraction mapwith Google v3
Get GoogleAPI
Get MapStraction API