ThinkGeo Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Map Suite WebApi Overlays ======

===== Video Overview =====
{{youtube>WiWJoKhWAg4?large |Web API Overlays Learning Sample}}

<div newline></div>
<div download_viewsource_buttons tryitonline>
{{filehistory:WebAPIEditionSample_Overlays_CS_20150820.zip|C# Project}}
[[source_code_webapieditionsample_overlays.zip|View Source]]
[[http://samples.thinkgeo.com/WebApiEdition/SampleTemplates/Overlays/leaflet/|Try It Online(Leaflet)]]
[[http://samples.thinkgeo.com/WebApiEdition/SampleTemplates/Overlays/openlayers/|Try It Online(Openlayers)]]

</div>
===== Overview =====
In this sample we show you how you can use client and server side overlays to create great looking maps. We explore how to add WMS services on the client side to add basemaps such as WorldMapKit, OpenStreetMap, BingMaps, and GoolgeMap. At the same time we show you how you can add custom overlay on the server side to render your data on to the map.


<div newline></div>
===== World Map Kit =====
<div captionwithborder floatright>
{{webapiedition:worldmapkit.png?300}}
\\
//World Map Kit.
//
</div>

Example on how to load Map Suite World Map Kit Online, a cloud-based map service, offering detailed street, aerial, and hybrid maps of the globe that your applications can consume directly over the Internet.[[map_suite_world_map_kit_online|More.]]

<div newline></div>
===== OpenStreetMap=====
<div captionwithborder floatright>
{{webapiedition:openstreetmap.png?300}}
\\
//OpenStreetMap.
//
</div>

Example on how to load OpenStreetMap as your. http://www.openstreetmap.org.

<div newline></div>
===== Bing Maps =====
<div captionwithborder floatright>
{{webapiedition:bingmap.png?300}}
\\
//Bing Maps.
//
</div>

Example on how to load Bing Maps as your basemap. Get your Bing Maps API key at http://bingmapsportal.com/. There are four available styles: Aerial, Aerial with labels, Road, Collins Bart, and Ordnance Survey.


<div newline></div>
===== Google Map=====
<div captionwithborder floatright>
{{webapiedition:googlemap.png?300}}
\\
//Google Map.
//
</div>

Example on how to load Google Map as your basemap. 

<div newline></div>
===== Custom Overlay =====
<div captionwithborder floatright>
{{webapiedition:googlemap.png?300}}
\\
//Google Map with custom overlay.//
\\
{{webapiedition:googlemapwithoutcustomoverlay.png?300}}
\\
//Google Map without custom overlay.//
</div>
In this sample we overlay all the schools located in Frisco, Texas. From server side we use special styles with the custom overlays to load our data. There is a check box on the upper right corner that allows you to turn on/off the custom overlay. From the server side Map Suite WebAPI Edition loads up the LayerOverlay for the layer which contains the schools. You have full control for adding your own layers to create customized maps.
User Tools

Site Tools

Page Tools
