10 Map Mashups Mapping in the Cloud Peterson Basic Map Basic Map Link to Google
Maps API
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
Latitude
<script type="text/javascript">
function initialize(){
Longitude
var latlng = new google.maps.LatLng(46.810928, -90.817981);
Zoom level: var myOptions = {
zoom: 15,
ROADMAP, HYBRID
0-20
center: latlng,
OR SATELLITE
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
Size of map
</script>
in pixels
<title></title>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:600px; height:300px">
</div>
</body>
</html>
With Marker With Marker Latitude
Longitude
<script type="text/javascript">
var map;
function initialize(){
var myLatlng = new google.maps.LatLng(46.810928, -90.817981);
Zoom level: var myOptions = {
zoom: 15,
ROADMAP, HYBRID
0-20
center: myLatlng,
OR SATELLITE
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Text for
marker
var marker = new google.maps.Marker({
Define marker
position: myLatlng,
map: map,
title: "Hello World!"
});
google.maps.event.addListener(marker, 'click', function(){
map.setZoom(17);
New zoom level
});
}
</script>
after click
Clickable Marker Clickable Marker Latitude
Longitude
function initialize()
{
var myLatlng = new google.maps.LatLng(41.258531, -96.012599);
Zoom level:
0-20
Text for
Infowindow
var myOptions = {
//this defines the zoom level
zoom: 14,
ROADMAP, HYBRID
center: myLatlng,
OR SATELLITE
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({
Define marker
position: myLatlng,
map: map,
title: "Cartography and GIS Laboratory"
});
Text for
marker
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
}
Add “Listener”
to marker
Basic Bing Basic Bing Call to Bing
Maps API
<html>
<head>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</script>
Bing Maps Key free
<script type="text/javascript">
function GetMap(){
from Microsoft
var mapOptions = {
credentials: "AmnzJW8uTvn19E0NiZ7Gx5qxrnm_oQB9zKZw2mIJ0kw6D9dPqwivr4_7WGHCZZgh",
center: new Microsoft.Maps.Location(28.950025, -81.304865),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 13,
showScalebar: false
}
road, aerial,
or birdseye
Latitude
Longitude
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>
Size of map
in pixels
Bing Marker Bing Marker Bing Maps Key free
from Microsoft
function GetMap(){
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
credentials: "AmnzJW8uTvn19E0NiZ7Gx5qxrnm_oQB9zKZw2mIJ0kw6D9dPqwivr4_7WGHCZZgh"});
var loc = new Microsoft.Maps.Location(41.258531, -96.012599);
Add pin
to map
var pin = new Microsoft.Maps.Pushpin(loc);
map.entities.push(pin);
map.setView({
center: loc,
zoom: 15
});
}
Center map
on Pushpin
Latitude
Longitude
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});
Text for inside
of Pushpin
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',
Initially invisible
visible: false,
offset: new Microsoft.Maps.Point(0, 15)});
Infobox for
Pushpin
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
Add pin
and infobox
to map
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);
map.entities.push(pin);
map.entities.push(pinInfobox);
}
Hide infobox if
map is moved
Handler for
click event
Bing Marker Hover function displayInfobox(e){
stopInfoboxTimer(e);
var pin = e.target;
if (pin != null) {
Bing Marker Hover Text for inside
of Infobox
var location = pin.getLocation();
var options = {
id: 'infoBox1',
title: 'Cartography & GIS Laboratory',
description: 'University of Nebraska at Omaha',
height: 90,
width: 240,
Parameters
visible: true,
for Infobox
showPointer: true,
showCloseButton: true,
offset: new MM.Point(0, pin.getHeight()),
zIndex: 999
};
Is not equal to
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;
After event,
}
return to null
Handle mouseenter/
mouseleave events
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);
}
}
Nokia Here Nokia Here Provide key to
use Nokia HERE
<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>
Get DOM
for the map
Add pan/zoom
behavior
Nokia Marker Nokia Marker Provide key to
use Nokia API
<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()]
});
Add marker at
map center
Get DOM
for the map
Add pan/zoom
behavior
var standardMarker = new nokia.maps.map.StandardMarker(map.center);
map.objects.add(standardMarker);
</script>
Put marker
in map object
Nokia Styled Markers Nokia Styled Markers var standardMarkerProps = [null,
{
text: "42",
brush: {color: "#F80"}}, {
1st marker with
null properties
2nd marker
text: "@",
brush: {color: "#F80"},
textPen: {strokeColor: "#333"}}, {
text: "Hi",
textPen: {strokeColor: "#333"},
brush: {color: "#FFF"},
pen: {strokeColor: "#333"}}],
3rd marker
4th marker
Number of markers
i = 4;
while (i--)
map.objects.add(new nokia.maps.map.StandardMarker(
map.center.walk(360 / standardMarkerProps.length * i, 6000),
standardMarkerProps[i]));
Places markers
</script>
Counter goes
backwards
around middle
Nokia Text Markers Nokia Text Markers Text for
marker
Text marker
location
var fernsehturmTextMarker = new TextMarker(new nokia.maps.geo.Coordinate
(52.520816, 13.409417), "Fernsehturm", 106, 24, {
Height of
brush: {
Width
of
color: "#00000088"
text box
},
text box
pen: {
strokeColor: "#FFF",
strokeWidth: 1
},
textPen: {
strokeColor: "#FFF",
Font settings
fontSize: 16,
fontFamily: "sans-serif",
offsetX: 8,
offsetY: 17
Add to map
}
container
});
markersContainer.objects.addAll([brandenbugerTorTextMarker, fernsehturmTextMarker]);
MapQuest Basic MapQuest Basic <script type="text/javascript">
Hooks into the
window load event
MQA.EventUtil.observe(window, 'load', function(){
Map type
/*Create an object for options*/
var options = {
elt: document.getElementById('map'),
zoom: 10,
latLng: {
Zoom level
lat: 39.743943,
lng: -105.020089},
and center
mtype: 'map',
bestFitMargin: 0,
zoomOnDoubleClick: true
Double-click
};
to zoom-in
window.map = new MQA.TileMap(options);
});
</script>
Attach options
to map
MapQuest controls MapQuest controls Create an
options object
Add a large
zoom control
window.map = new MQA.TileMap(options);
Distance in pixels
MQA.withModule('largezoom', function() {
map.addControl(
from top left
new MQA.LargeZoom(),
new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
);
});
Place zoom
control at top left
MapQuest Marker MapQuest Marker Create an
options object
window.map = new MQA.TileMap(options);
Lat/long
of marker
var basic = new MQA.Poi({
lat: 39.743943,
lng: -105.020089
});
map.addShape(basic);
Add marker to map’s
shape collection
MapQuest Line MapQuest Line Create an
options object
window.map = new MQA.TileMap(options);
MQA.withModule('shapes', function() {
var line = new MQA.LineOverlay();
Lat/long pairs for line,
minimum two pairs
line.setShapePoints([39.633041, -105.318492, 39.847136, -104.674787]);
map.addShape(line);
Add line to map’s
shape collection
OpenStreetMap Basic OpenStreetMap Basic Both OpenLayers and
OpenStreetMap APIs
<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;
Center &
Specifying
lon = -90.817981;
Zoom
zoom = 15;
WGS 84 coords
Spherical
Mercator
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>
Transformed
OpenLayer map
OpenStreetMap Controls OpenStreetMap Controls <script>
function init(){
lat = 46.810928;
lon = -90.817981;
zoom = 15;
Specifying
WGS 84 coords
projLonLat = new OpenLayers.Projection("EPSG:4326");
projMercator = new OpenLayers.Projection("EPSG:900913");
overviewMap = new OpenLayers.Control.OverviewMap();
Add scale
scale = new OpenLayers.Control.ScaleLine();
scale.geodesic = true;
geopos = new OpenLayers.Control.MousePosition();
geopos.displayProjection = projLonLat;
geopos.numDigits = 4;
Parameters
geopos.granularity = 12;
Spherical
Mercator
Overview map
Displays current
position of mouse
for position
Attribution text
Scale bar
Display
overview
]
Set direct panning
map = new OpenLayers.Map("demoMap", {
theme: null,
via mouse drag
controls: [new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Attribution(),
Navigation control
new OpenLayers.Control.PanZoomBar(),
scale,
Display
geopos,
position
overviewMap
});
map.addLayer(new OpenLayers.Layer.OSM.Mapnik());
map.setCenter(new OpenLayers.LonLat(lon,lat).transform(projLonLat,projMercator),zoom);
overviewMap.maximizeControl();
}
</script>
Control of
overview map
Transformed
OpenLayer map
OpenStreetMap Marker OpenStreetMap Marker <script>
var lat = 46.810928;
var lon = -90.817981;
var zoom = 15;
Define
position
Specifying
WGS 84 coords
Spherical
Mercator
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);
Get OpenLayer
map
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position));
map.setCenter(position, zoom);
</script>
Add marker
to center
OpenStreetMap Markers Marker function
OpenStreetMap Markers Color
function addMarker(layer, lon, lat, popupContentHTML, farbe) {
If color is red
If color is yellow
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',
Marker name
new OpenLayers.Size(18, 30),
new OpenLayers.Pixel(-9, -30));
and size
}
if(farbe=="gelb"){
data.icon = new OpenLayers.Icon('osmgelb.gif',
new OpenLayers.Size(18, 30),
new OpenLayers.Pixel(-9, -30));
Position relative
}
to lon & lat
var feature = new OpenLayers.Feature(layer, ll, data);
feature.closeBox = true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud,
{minSize: new OpenLayers.Size(200, 80) } );
Define pop-up
feature.data.popupContentHTML = popupContentHTML;
window & size
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);
Define pop-up
this.popup.show();
} else {
this.popup.toggle();
}
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
layer.addMarker(marker);
}
Click event
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 {
MouseDown
this.popup.toggle();
event
}
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);
MouseOut event
MouseOver
event
Leaflet Markers Leaflet Markers <body>
<div id="map" style="width: 700px; height: 300px">
</div>
<script src="http://leafletjs.com/dist/leaflet.js">
</script>
Center & <script>
var map = L.map('map').setView([51.505, -0.09], 13);
Get 28 KB
Leaflet API
Get CloudMade
OpenStreetMap Tiles
zoom
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);
Marker and
popup
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, {
Circle and
color: 'red',
popup
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>
Polygon and
popup
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);
Leaflet Custom Marker Get 28 KB
Leaflet API
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
attribution: 'Map data © 2013 OpenStreetMap contributors',
key: 'BC9A493B41014CAABB98F0471D759707'
Get one shadow
}).addTo(map);
for all 3 icons
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],
Link to
popupAnchor: [-3, -76]
three icons
}
});
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>
Put icons
on map
Leaflet Layers Put cities in
“cities” layer
cities layer
<script>
var cities = new L.LayerGroup();
L.marker([39.61,
L.marker([39.74,
L.marker([39.73,
L.marker([39.77,
Leaflet Layers -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
-104.99]).bindPopup('This is Denver, CO.').addTo(cities),
-104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
-105.23]).bindPopup('This is Golden, CO.').addTo(cities);
Basemap
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};
Object with
base layers
var overlays = {
"Motorways": motorways,
"Cities": cities};
Object with
overlays
L.control.layers(baseLayers, overlays).addTo(map);
</script>
Minimal, midnight &
motorways layers
Create Layers
Control
Leaflet Choropleth var map = L.map('map').setView([37.8, -96], 4);
Initial view
Basemap
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);
Leaflet Choropleth var info = L.control();
State info
on hover
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;};
Window
with text
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
d > 500
d > 200
d > 100
d > 50
d > 20
d > 10
{
?
?
?
?
?
?
?
'#800026' :
'#BD0026' :
'#E31A1C' :
'#FC4E2A' :
'#FD8D3C' :
'#FEB24C' :
'#FED976' :
'#FFEDA0';}
Color of
polygons
function style(feature) {
return {
weight: 2,
opacity: 1,
Style of
color: 'white',
bounding lines
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density)};}
MapStracHon OpenLayers MapStracHon OpenLayers Get OpenLayers
API
Get MapStraction API
<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;
Map size
}
</style>
<script type="text/javascript">
MapStraction map
var mapstraction;
function create_map() {
with OpenLayers
mapstraction = new mxn.Mapstraction('mymap', 'openlayers');
mapstraction.setCenterAndZoom(
new mxn.LatLonPoint(41.258531,-96.012599), 15);
Center & Zoom
}
</script>
Level
</head>
MapStracHon Google MapStracHon Google Get Google
API
<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 {
Get MapStraction API
width: 700; height: 300px;
Map size
}
</style>
<script type="text/javascript">
MapStraction map
var mapstraction;
function create_map() {
with Google v3
mapstraction = new mxn.Mapstraction('mymap', 'googlev3');
mapstraction.setCenterAndZoom(
new mxn.LatLonPoint(41.258531,-96.012599), 15);
Center & Zoom
}
</script>
Level
</head>
© Copyright 2024 ExpyDoc
