This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
map_suite_overlays [2015/11/19 04:38] tgwikiupdate [Custom Overlay] |
map_suite_overlays [2015/12/03 09:27] (current) tgwikiupdate [Video Overview] |
||
---|---|---|---|
Line 5: | Line 5: | ||
<div newline></div> | <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 ===== | ===== Overview ===== | ||
- | In this sample, explore how to add WMS services as base map to the map by JavaScript, including WorldMapKit, OpenStreetMap, BingMaps, GoolgeMap. At the same time we add custom overlay to render your data on map. | + | 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. |
Line 18: | Line 25: | ||
</div> | </div> | ||
- | The Map Suite World Map Kit SDK is an extension for our Map Suite line of GIS developer controls that includes everything you need to display professional-looking maps of any location on Earth.[[map_suite_world_map_kit_sdk|More.]] | + | 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> | <div newline></div> | ||
Line 29: | Line 36: | ||
</div> | </div> | ||
- | Example of load OpenStreetMap map as a basemap. http://www.openstreetmap.org. | + | Example on how to load OpenStreetMap as your. http://www.openstreetmap.org. |
<div newline></div> | <div newline></div> | ||
Line 40: | Line 47: | ||
</div> | </div> | ||
- | Example of load Bing Maps as a basemap. Get your Bing Maps API key at http://bingmapsportal.com/. There are four types of imageries, including Aerial, Aerial with labels, Road, Collins Bart and Ordnance Survey. | + | 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. |
Line 52: | Line 59: | ||
</div> | </div> | ||
- | Example of load Google Map as a basemap. | + | Example on how to load Google Map as your basemap. |
<div newline></div> | <div newline></div> | ||
Line 65: | Line 72: | ||
//Google Map without custom overlay.// | //Google Map without custom overlay.// | ||
</div> | </div> | ||
- | In this sample,we overlaying all the schools here in Frisco Texas with the special style with the custom overlay that is coming from the server side.There is a check box in the upper right corner to display and hide custom overlay. In the server side, Map Suite WebAPI Edition load up a new LayerOverlay for our layer which contains our school, and you can add more layer for different data. | + | 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. |