This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
map_suite_webapi_markers_and_popups [2015/11/09 06:54] tgwikiupdate [Markers and Popups] |
map_suite_webapi_markers_and_popups [2015/12/03 09:41] (current) tgwikiupdate [Video Overview] |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== Map Suite WebAPI Markers and Popups====== | ====== Map Suite WebAPI Markers and Popups====== | ||
- | ===Video Overview=== | + | ===== Video Overview ===== |
+ | {{youtube>CIoHHqK5U6s?large |Web API Markers and Pop Ups Learning Sample}} | ||
+ | <div newline></div> | ||
+ | <div download_viewsource_buttons tryitonline> | ||
+ | {{filehistory:WebAPIEditionSample_MarkersAndPopUps_CS_151111.zip|C# Project}} | ||
+ | [[source_code_webapieditionsample_markersandpopups.zip|View Source]] | ||
+ | [[http://samples.thinkgeo.com/WebApiEdition/SampleTemplates/MarkerAndPopup/leaflet/|Try It Online(Leaflet)]] | ||
+ | [[http://samples.thinkgeo.com/WebApiEdition/SampleTemplates/MarkerAndPopup/openlayers/|Try It Online(Openlayers)]] | ||
- | Coming Soon. | + | </div> |
===Overview=== | ===Overview=== | ||
- | In the sample, we show how to put marker with marks position in a popup on the map. The marker can be drag. Click map can change marker’s position and update popup’s content. Click marker can show or hide popup. | + | This sample shows you how to use markers and popups. Markers can be dragged across the map in order to place them on a new location anywhere on the map. By clicking on the marker users are able to see a popup with the location information. In this sample we are using both Leaflet and Openlayers. |
==== Markers ==== | ==== Markers ==== | ||
Line 16: | Line 23: | ||
</div> | </div> | ||
- | We put a marker on the map. Set up a custom icon for the marker. The marker can be drag on the map. Its position can be modified by clicking on map. In the Openlayers, the marker is implemented by vector layer. | + | Developers can use custom icons as their markers. Markers can then be dragged anywhere on the map. |
+ | <div newline></div> | ||
<div newline></div> | <div newline></div> | ||
==== Markers and Popups ==== | ==== Markers and Popups ==== | ||
Line 26: | Line 33: | ||
</div> | </div> | ||
- | We put a marker on the map, it binds a popup. The popup can be showed or hided by clicking marker. The position of the popup will be synchronized with the marker’s position. The sample set the current marker’s position to popup’s content. In the Openlayers, the popup is implemented by overlay. | + | With the marker users can also get a popup with the location information. Users can show or hide the popup information by clicking on the marker. If marker is moved, the location information is automatically updated on the popup. |
+ | <div newline></div> | ||
<div newline></div> | <div newline></div> |