10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf ·...

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

LatitudeLongitude

ROADMAP, HYBRIDOR SATELLITE

Zoom level:0-20

Define marker

Text formarker

New zoom levelafter click

With Marker

Clickable Marker

LatitudeLongitude

Zoom level:0-20 ROADMAP, HYBRID

OR SATELLITE

Define marker

Text formarker

Text forInfowindow

Add “Listener”to marker

Clickable Marker

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

Get DOMfor the map

Provide key touse Nokia HERE

Add pan/zoombehavior

Nokia Marker

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

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

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

window.map = new MQA.TileMap(options); var basic = new MQA.Poi({ lat: 39.743943, lng: -105.020089}); map.addShape(basic);

Lat/longof marker Add marker to map’s

shape collection

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);

Lat/long pairs for line,minimum two pairs

Add line to map’sshape collection

OpenStreetMap Basic

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

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

Mercator

Defineposition Get OpenLayer

Add markerto center

OpenStreetMap Markers

layer.addMarker(marker);}

Marker function

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 &

Marker andpopup

Circle andpopup

Polygon andpopup

Leaflet Custom Marker

Leaflet Custom Marker <body>

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 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

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

<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>

Center & ZoomLevel

Map size

MapStraction mapwith OpenLayers

Get MapStraction APIGet OpenLayers

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>

Center & ZoomLevel

Map size

MapStraction mapwith Google v3

Get GoogleAPI

Get MapStraction API

10#Map#Mashups# - maps.unomaha.edumaps.unomaha.edu/cloud/PowerPoints/Chapter_10_Mashups.pdf ·...

Documents

Leadership Mashups

Multimedia: MashUps

Toward Process Mashups

Map Layer Mashups Peterson. Overlay of Old Map function initialize() { var newark = new google.maps.LatLng(40.740, -74.18); var imageBounds = new google.maps.LatLngBounds(

Mashups for Libraries

New Pres - Mashups

VoIP Mashups

Enterprise Voice Mashups

Mashups For Soa

Web Mashups

Leadership Mashups Innovation

A1 Connections Mashups

Point Mashups

Mobile Web Mashups

Library Mashups & APIs

Mobile Mashups

Leadership Mashups: Innovation

Cognos Mapping Mashups

Mashups & APIs

Mashups in the_classroom