Map JS API
Use the manual mode to create annotations with the mouse
This example introduces the manual mode to create and edit polygons, lines, and markers with the SwitchMode API function.
<html> <head> <script src="https://rasters.io/maps/v0.8.0/rasters.map.min.js"></script> <link rel="stylesheet" href="https://rasters.io/maps/v0.8.0/rasters.css" /> <style> html, body { height: 100%; -ms-touch-action: none; } </style> </head> <body> <script> var map; var MapToken = "Enter your MapToken here"; Rasters.Map.OnReady = function () { map = new Rasters.Map({ container: 'Map', // container id url: 'https://api.rasters.io/', mapKey: "", authenticationMode: Rasters.AuthenticationMode.MapToken, token: MapToken }); map.OnReady = OnConnectHander; } function OnConnectHander() { map.SetPosition(-71.2170425, 46.810457, 10); } function Draw(mode) { var options = { layerId: "", isShared: false, isLocked: false, defaultItemName: "default", defaultItemStyles: { "style.color": "#FF0000" } } map.SwitchMode(mode, options); } </script> <div style='width: 100%; height: 400px; position: relative;'> <div id="Map" style='width: 100%; height: 100%;'></div> <div class="btn-group" style="position: absolute; right: 10px; top: 10px;" > <button onclick="Draw('draw_polygon')">Polygon</button> <button onclick="Draw('draw_line_string')">Line</button> <button onclick="Draw('draw_point')">Marker</button> </div> </div> </body> </html>
Help Guide Powered by Documentor