Source Code WebAPIEditionSample GettingStarted.zip

Default.html(LeafLet)

 <!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> | &copy; <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>

Default.htm(OpenLayers)

 <!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> | &copy; <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>

Sidebar

Table of Contents

Source Code WebAPIEditionSample GettingStarted.zip

Default.html(LeafLet)

Default.htm(OpenLayers)

User Tools

Site Tools

Sidebar

Table of Contents

Source Code WebAPIEditionSample GettingStarted.zip

Default.html(LeafLet)

Default.htm(OpenLayers)

Page Tools