Rectangle
Generate rectangle object and display it on the map.
Rectangle
mogosmap.maps.Rectangle({ option });Parameters
map
Map object to display the Rectangle
Map Instance
circleStyle
Set individual circle styles.
color :
Set the color of the inner cluster. Colors, HEX, RGB, RGBA (Default : #fff)
strokeColor :
Set the color of the outer cluster. Colors, HEX, RGB, RGBA (Default : #F2AF4E)
strokeWidth :
Set the width of the outer cluster. numeric (Default : 4)
radius :
Set the radius of the cluster. numeric
(Default : 4.5)
Object
rectangleStyle
Set individual rectangle styles.
lineColor :
The color with which the line will be drawn. Colors, HEX, RGB, RGBA (Default : #1bcdc1)
lineWidth :
Stroke thickness.
numeric
(Default : 5)
dashLineColor :
The color with which the line will be drawn. Colors, HEX, RGB, RGBA (Default : #a5a5a5)
dashLineWidth :
Stroke thickness.
numeric
(Default : 4)
dashArray :
Specifies the lengths of the alternating dashes and gaps that form the dash pattern. Array<numeric> (Default : [3, 2])
fillColor :
The color of the filled part of this layer. Colors, HEX, RGB, RGBA (Default : #1bcdc1) fillOpacity :
The opacity of the entire fill layer. numeric between 0 and 1
Default : 0.3
textColor :
The color with which the text will be drawn. Colors, HEX, RGB, RGBA (Default : #F2AF4E)
textSize :
Set the font size. numeric (Default : 18)
textHaloColor :
The color of the text's halo, which helps it stand out from backgrounds. Colors, HEX, RGB, RGBA Default : #fff
textHaloWidth :
Distance of halo to the font outline. Max text halo width is 1/4 of the font-size.
numeric (Default : 5)
overlap :
If true, the icon will be visible even if it collides with other previously drawn symbols.
boolean (Default : true)
placement :
If true, other symbols can be visible even if they collide with the icon.
boolean (Default : true)
Object
callback
A callback is a function passed as an argument to another function.
Function
Returns
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rectangle</title>
</head>
<body>
<div style="height: 100vh">
<div id="app"></div>
</div>
<button style="position: absolute; float: top; top: 50px; left: 50px;" onclick="rectangleAPI()">Rectangle API</button>
<script type="text/javascript" src="https://maps.mogoscorp.com/dist/mogosmap-gl.js"></script>
<script>
const LatLng = {lat: 37.482901, lng: 126.896038};
const mapInstance = new mogosmap.maps.Map(
document.getElementById("app"),
{
zoom: 14.5,
center: LatLng,
maxZoom: 20,
minZoom: 2,
key: 'YOUR_API_KEY',
}
);
function rectangleAPI() {
new mogosmap.maps.Rectangle({
map : mapInstance,
circleStyle : {
color: '#fff',
radius: 4.5,
strokeColor: '#F2AF4E',
strokeWidth: 4
},
rectangleStyle : {
lineColor: '#1bcdc1',
lineWidth: 5,
dashLineColor: '#a5a5a5',
dashLineWidth: 4,
dashArray: [3,2],
fillColor: '#1bcdc1',
fillOpacity: 0.3,
textColor: '#F2AF4E',
textSize: 18,
textHaloColor: '#fff',
textHaloWidth: 5,
overlap: true,
placement: true,
},
callback : getData,
});
}
function getData(bounds) {
console.log('GetData ::', bounds)
}
</script>
</body>
</html>The MOGOS Maps API requires an API Key, which can be obtained from the MOGOS Console website or contact [email protected].
Last updated