ThinkGeo Cloud
ThinkGeo UI Controls
ThinkGeo Open Source
Help and Support
External Resources
ThinkGeo Cloud
ThinkGeo UI Controls
ThinkGeo Open Source
Help and Support
External Resources
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Get Started with the Map</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="shortcut icon" href="favicon.ico"> <link rel="apple-touch-icon" href="desktop.png"> <meta name="apple-mobile-web-app-title" content="Getting Started" /> <link href="Content/leaflet.css" rel="stylesheet" /> <link href="Content/leaflet.contextmenu.css" rel="stylesheet" /> <link href="Content/Site.css" rel="stylesheet" /> </head> <body> <div id="map-page"> <div id="map"> </div> <div id="tips"> <ul> <li id="scale">Scale: 1:73,957,338.86</li> <li id="zoom">Zoom: 2</li> <li id="lat">Latitude: 37.80014 </li> <li id="lng">Longitude: -96.1010</li> </ul> </div> <div id="locateError"></div> </div> <script src="Scripts/jquery-1.11.1.min.js"></script> <script src="Scripts/leaflet.js"></script> <script src="Scripts/leaflet.contextmenu.js"></script> <script src="thinkgeo.leaflet.js"></script> <script> $(function () { // create the map with context-menu var map = L.map('map', { center: [39.6948,|-96.8150], zoom: 4, contextmenu: true, contextmenuItems: [{ | text: 'Center map here', callback: function (e) { map.panTo(e.latlng); } }, '-', { text: 'Zoom to zoomlevel 5 (Country Level)', callback: function (e) { map.setView(e.latlng, 5); } }, { text: 'Zoom to zoomlevel 8 (State Level)', callback: function (e) { map.setView(e.latlng, 8); } }, { text: 'Zoom to zoomlevel 12 (City Level)', callback: function (e) { map.setView(e.latlng, 12); } }, { text: 'Zoom to zoomlevel 17 (Street Level)', callback: function (e) { map.setView(e.latlng, 17); } }] }); // add thinkgeo map L.tileLayer.wms('http://{s}.thinkgeo.com/CachedWMSServer/WmsServer.axd', { subdomains: ['worldmapkit1',|'worldmapkit2', 'worldmapkit3', 'worldmapkit4', 'worldmapkit5', 'worldmapkit6'], layers: 'OSMWorldMapKitLayer', format: 'image/png', styles: 'WorldMapKitDefaultStyle', version: '1.1.1', attribution: '<a href="http://thinkgeo.com/map-suite-developer-gis/world-map-kit-sdk/">ThinkGeo</a> | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors ' }).addTo(map); // add image buttons for locate, full extent, help etc. L.imageButtons({ id: 'toolbar', imgs: [ | { src: 'Images/icons/location-inactive.png', title: 'Locate', callback: function () { locate(this.target, 'location.png', 'location-inactive.png') } }, { src: 'Images/icons/full-extent.png', title: 'Zoom to full extent', callback: function () { map.setView([-4.9158, -4.2187], 2); } }, { src: 'Images/icons/info.png', title: 'Help?', callback: function () { window.open('http://wiki.thinkgeo.com/wiki/Map_Suite_WebAPI_Edition_Samples_Getting_Started', '_blank'); } }, ] }).addTo(map); // mouse-move event for showing current scale, zoom, center etc. map.on('move', function (e) { var center = map.getCenter(); $('#scale').text('Scale: 1:' + map.getScale().toLocaleString()); $('#zoom').text('Zoom: ' + map.getZoom()); $('#lat').text('Latitude: ' + center.lat.toPrecision(6)); $('#lng').text('Longitude: ' + center.lng.toPrecision(6)); }); // 'click' event to show a popup with current location var clickedPopup = L.popup(); map.on('click', function (e) { var lng = L.Util.wrapNum(e.latlng.lng, [-180,|180], false); var content = "Latitude:" + e.latlng.lat.toFixed(4) + " Longitude:" + lng.toFixed(4); if (clickedPopup) { map.removeLayer(clickedPopup); } clickedPopup.setLatLng(e.latlng); clickedPopup.setContent(content).openOn(map); }); // toggle 'locate' image between active and deactive var locate = function (locateImg, activeImg, deactiveImg) { if ($(locateImg).hasClass('active')) { map.removeLayer(locationLayer); if (toleranceLayer) { map.removeLayer(toleranceLayer); } map.stopLocate(); locateImg.src = 'Images/icons/' + deactiveImg; $(locateImg).removeClass('active'); } else { map.locate({ setView: true, maxZoom: 16, watch: true }); locateImg.src = 'Images/icons/' + activeImg; $(locateImg).addClass('active'); } }; // html5 geolocation var toleranceLayer, locationLayer; map.on('locationfound', function (e) { $('#locateError').text(//); if (toleranceLayer) { map.removeLayer(toleranceLayer); } toleranceLayer = L.circle(e.latlng, e.accuracy, { color: '#136AEC', fillColor: '#136AEC', fillOpacity: 0.15, weight: 2, opacity: 0.5 }).addTo(map); if (locationLayer) { map.removeLayer(locationLayer); } locationLayer = L.circleMarker(e.latlng, { color: '#136AEC', fillColor: '#2A93EE', fillOpacity: 0.7, weight: 2, opacity: 0.9, radius: 5 }).addTo(map); }); map.on('locationerror', function (e) { $('#locateError').text('Failed to locate your position.'); }); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Getting started with map</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="shortcut icon" href="favicon.ico"> <link rel="apple-touch-icon" href="desktop.png"> <meta name="apple-mobile-web-app-title" content="ThinkGeo Getting started" /> <link href="Content/ol.css" rel="stylesheet" /> <link href="Content/thinkgeo.openlayers.css" rel="stylesheet" /> <link href="Content/Site.css" rel="stylesheet" /> </head> <body> <div id="map-page"> <div id="map"> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content"></div> </div> <div id="contextMenu" class="ol-menu"> <a class="menu-item" href="#" onclick="centerHere();">Center map here</a> <div class="menu-separator"></div> <a class="menu-item" href="#" onclick="zoom(5);">Zoom to zoomlevel 5 (Country Level)</a> <a class="menu-item" href="#" onclick="zoom(8);">Zoom to zoomlevel 8 (State Level)</a> <a class="menu-item" href="#" onclick="zoom(12);">Zoom to zoomlevel 12 (City Level)</a> <a class="menu-item" href="#" onclick="zoom(17);">Zoom to zoomlevel 17 (Street Level)</a> </div> </div> <div id="tips"> <ul> <li id="scale">Scale: 1:73,957,338.86</li> <li id="zoom">Zoom: 2</li> <li id="lat">Latitude: 37.80014 </li> <li id="lng">Longitude: -96.1010</li> </ul> </div> <div id="locateError"></div> </div> <script src="Scripts/jquery-1.11.1.min.js"></script> <script src="Scripts/ol.js"></script> <script src="thinkgeo.openlayers.js"></script> <script> // create the map var map = new ol.Map({ controls: [ | new ol.control.Zoom(), new ol.control.Attribution({ collapsible: false }) ], layers: [ | new ol.layer.Tile({ source: new ol.source.TileWMS(({ urls: ['http://worldmapkit1.thinkgeo.com/CachedWMSServer/WmsServer.axd', 'http://worldmapkit2.thinkgeo.com/CachedWMSServer/WmsServer.axd', 'http://worldmapkit3.thinkgeo.com/CachedWMSServer/WmsServer.axd', 'http://worldmapkit4.thinkgeo.com/CachedWMSServer/WmsServer.axd', 'http://worldmapkit5.thinkgeo.com/CachedWMSServer/WmsServer.axd', 'http://worldmapkit6.thinkgeo.com/CachedWMSServer/WmsServer.axd'], params: { 'LAYERS': 'OSMWorldMapKitLayer', 'VERSION': '1.1.1' }, attributions: [new|ol.Attribution({ html: '<a href="http://thinkgeo.com/map-suite-developer-gis/world-map-kit-sdk/">ThinkGeo</a> | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors <a href="http://www.openstreetmap.org/copyright">ODbL</a>' })] })) }) ], target: 'map', view: new ol.View({ center: [-10777396.499651,|4821690.0604384], zoom: 4 }) }); // add image buttons for locate, full extent, help etc. var imgControls = new app.ImagesControl({ imgs: [ | { src: 'Images/icons/location-inactive.png', title: 'Locate', callback: function () { locate(this, 'location.png', 'location-inactive.png'); } }, { src: 'Images/icons/full-extent.png', title: 'Zoom to full extent', callback: function () { map.setView(new ol.View({ center: [-4.9158, -4.2187], zoom: 2 })); } }, { src: 'Images/icons/info.png', title: 'Show help', callback: function () { window.open('http://wiki.thinkgeo.com/wiki/Map_Suite_WebAPI_Edition_Samples_Getting_Started', '_blank'); } } ] }); map.addControl(imgControls); // mouse-move event for showing current scale, zoom, center etc. map.on('moveend', function (e) { var mapView = this.getView(); var zoom = mapView.getZoom(); var scale = app.getScale(zoom); var center = ol.proj.transform(mapView.getCenter(), 'EPSG:3857', 'EPSG:4326'); $('#scale').text('Scale: 1:' + scale.toLocaleString()); $('#zoom').text('Zoom: ' + zoom); $('#lat').text('Latitude: ' + center[0].toPrecision(6)); $('#lng').text('Longitude: ' + center[1].toPrecision(6)); }); // Elements that make up the popup. var container = document.getElementById('popup'); var content = document.getElementById('popup-content'); var closer = document.getElementById('popup-closer'); // Add a click handler to hide the popup. closer.onclick = function () { container.style.display = 'none'; closer.blur(); return false; }; // Create an overlay to anchor the popup to the map. var overlay = new ol.Overlay({ element: container }); map.addOverlay(overlay); // 'click' event to show a popup with current location map.on('click', function (e) { var coordinate = e.coordinate; var center = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'); overlay.setPosition(coordinate); content.innerHTML = 'Latitude:' + center[1].toFixed(4) + ' Longitude:' + center[0].toFixed(4); container.style.display = 'block'; }); // add context menu var menuContainer = document.getElementById('contextMenu'); var menuContent = document.getElementById('contextMenu-content'); var menuOverlay = new ol.Overlay({ element: menuContainer }); map.addOverlay(menuOverlay); map.getViewport().oncontextmenu = function (e) { e.preventDefault(); var offsetx = e.clientX + 50; var offsety = e.clientY + 150; var menuPoint = map.getCoordinateFromPixel([offsetx,|offsety]); menuOverlay.setPosition(menuPoint); menuContainer.style.display = 'block'; }; map.on('click', function () { menuContainer.style.display = "none"; }); // Geolocation codes var geolocation = new ol.Geolocation({ projection: map.getView().getProjection(), tracking: false, trackingOptions: { maximumAge: 10000, enableHighAccuracy: true, timeout: 600000 } }); var source = new ol.source.Vector(); var vector = new ol.layer.Vector({ source: source, style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(19, 106, 236, .3)' }), stroke: new ol.style.Stroke({ color: '#136AEC', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#2A93EE' }) }) }) }); map.addLayer(vector); // Listen to position changes var accuracyFeature = new ol.Feature(); var positionFeature = new ol.Feature(); geolocation.on('change', function (evt) { var location = geolocation.getPosition(); var accuracy = geolocation.getAccuracy(); accuracyFeature = new ol.Feature(new ol.geom.Circle(location, accuracy)); positionFeature = new ol.Feature(new ol.geom.Point(location)); source.addFeatures([accuracyFeature,|positionFeature]); map.getView().fitExtent(accuracyFeature.getGeometry().getExtent(), map.getSize()); }); geolocation.on('error', function (e) { $('#locateError').text('Failed to locate your position.'); }); locate = function (locateImg, activeImg, deactiveImg) { if ($(locateImg).hasClass('active')) { geolocation.setTracking(false); source.clear(); locateImg.src = 'Images/icons/' + deactiveImg; $(locateImg).removeClass('active'); } else { geolocation.setTracking(true); // Start position tracking locateImg.src = 'Images/icons/' + activeImg; $(locateImg).addClass('active'); } }; var centerHere = function () { map.getView().setCenter(menuOverlay.getPosition()); menuContainer.style.display = "none"; }; var zoom = function (zoomnum) { map.getView().setZoom(zoomnum); map.getView().setCenter(menuOverlay.getPosition()); menuContainer.style.display = "none"; }; </script> </body> </html>