Embed Size (px)
Citation preview
10 Map Mashups
Mapping in the Cloud Peterson
Basic Map
<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
With Marker
<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
Clickable Marker
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
Basic Bing
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
Bing Marker
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
Bing Marker Info
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
Bing Marker Hover
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
Nokia Here
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>
Nokia Marker
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
Nokia Styled Markers
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
Nokia Text Markers
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
MapQuest Basic
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
MapQuest controls
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
MapQuest Marker
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
MapQuest Line
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
OpenStreetMap Basic
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
OpenStreetMap Controls
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
OpenStreetMap Marker
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
OpenStreetMap Markers
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
OpenStreetMap Hover
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
Leaflet Markers
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
Leaflet Custom Marker
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
Leaflet Layers
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
Leaflet Choropleth
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
MapStracHon OpenLayers
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
MapStracHon Google
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
