@inlog/inlog-maps
Advanced tools
A library to use generic layer maps.
drawPolyline
drawPolylineWithNavigation
addPolylinePath
removePolylineHighlight
showPolyline
alterPolylineOptions
const map = new inlogMaps.Map('Google');
const map = new inlogMaps.Map('Leaflet');
let type = 'sample';
let item = { something: 'hello world' };
let icon = new inlogMaps.MarkerIcon('images/cursor_locate.png');
let options = new inlogMaps.MarkerOptions([-26, -50], true, false, icon, true, item);
function eventClick(marker, event, object) {
// TODO: Do something here
// Will appear 'hello world' on console
console.log(object.something);
}
map.drawMarker(type, options, eventClick);
| Parameters | Type | Description |
|---|---|---|
| type | String | Type of the marker to help you find it later. |
| options | inlogMaps.MarkerOptions | Parameters of the marker. |
| eventClick | Function | Callback function when click on marker. eventClick params. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| latlng | Array | true | Position of the marker. Expects array with latitude and longitude: [Number, Number]. |
| addToMap | Boolean | false | Define if marker shows on the map. Default: false. |
| draggable | Boolean | false | Define if marker is draggable on the map. Default: false. |
| icon | inlogMaps.MarkerIcon | false | Used if the pin of the marker is custom. |
| fitBounds | Boolean | false | Define if the map will fit on the marker. Default: false. |
| object | Object | false | Is a object that will be returned in the eventClick function. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| url | String | true | Path of the image. |
| size | Array | false | Expects array with size of the positions x and y: [Number, Number]. |
| Parameters | Type | Description |
|---|---|---|
| marker | google.maps.Marker or L.Marker | Return the object of the clicked marker. |
| event | inlogMaps.EventReturn | Return a object with events params. |
| object | Object | Return the object that was passed on marker options. |
let type = 'sample';
let style = new inlogMaps.CircleMarkerStyle(5, 1, '#000000', '#FF0000', 0.8);
let options = new inlogMaps.CircleMarkerOptions([-24, -48], true, style, true);
function eventClick(marker, event, object) {
// TODO: Do something here
}
map.drawCircleMarker(type, options, eventClick);
| Parameters | Type | Description |
|---|---|---|
| type | String | Type of the circle marker to help you find it later. |
| options | inlogMaps.CircleMarkerOptions | Parameters of the circle marker. |
| eventClick | Function | Callback function when click on marker. eventClick params. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| latlng | Array | true | Position of the circle marker. Expects array with latitude and longitude: [Number, Number]. |
| addToMap | Boolean | false | Define if circle marker shows on the map. Default: false. |
| style | inlogMaps.CircleMarkerStyle | true | Style options of the circle marker. |
| fitBounds | Boolean | false | Define if the map will fit on the marker. Default: false. |
| object | Object | false | Is a object that will be returned in the eventClick function. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| radius | Number | true | Radius of the circle marker, in pixels. |
| weight | Number | false | Stroke width in pixels. |
| color | String | false | Stroke color. |
| fillColor | String | false | Fill color. |
| fillOpacity | String | false | Fill opacity. |
let type = 'sample';
let show = false;
map.showMarkers(show, type);
| Parameters | Type | Description |
|---|---|---|
| show | Boolean | Show/hide marker |
| type | String | Type of the marker |
let type = 'sample';
let options = new inlogMaps.MarkerAlterOptions([-20, -40]);
map.alterMarkerOptions(type, options);
| Parameters | Type | Description |
|---|---|---|
| type | String | Type of the marker |
| options | inlogMaps.MarkerAlterOptions | Parameters of the marker. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| latlng | Array | false | Position of the circle marker. Expects array with latitude and longitude: [Number, Number]. |
| icon | inlogMaps.MarkerIcon | false | Path of the image. |
| style | inlogMaps.CircleMarkerStyle | false | Style options of the marker. |
function eventClick(polygon, event, object) {
// TODO: Do something here
}
let type = 'polygon';
let path = [
[25.774, -80.190],
[18.466, -66.118],
[32.321, -64.757],
[25.774, -80.190]
];
let options = new inlogMaps.PolygonOptions(path, 1, true, '#000000', 1, '#FFFFFF', 0.8);
options.fitBounds = true;
map.drawPolygon(type, options, eventClick);
| Parameters | Type | Description |
|---|---|---|
| type | String | Type of the polygon to help you find it later. |
| options | inlogMaps.PolygonOptions | Parameters of the polygon. |
| eventClick | Function | Callback function when click on polygon. eventClick params. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| path | Array | true | Expected an array of positions. [[Number, Number], [Number, Number]]. |
| weight | Number | true | Stroke width in pixels. |
| addToMap | Boolean | false | Define if polygon shows on the map. Default: false. |
| color | String | false | Stroke color. |
| opacity | Number | false | Stroke opacity. |
| fillColor | String | false | Fill color. |
| fillOpacity | Number | false | Fill opacity. |
| draggable | Boolean | false | Define if marker is draggable on the map. Default: false. |
| editable | Boolean | false | Define if marker is editable. Default: false. |
| fitBounds | Boolean | false | Define if the map will fit on the polygon. Default: false. |
| object | Object | false | Is a object that will be returned in the eventClick function. |
| Parameters | Type | Description |
|---|---|---|
| marker | google.maps.Polygon or L.Polygon | Return the object of the clicked polygon. |
| event | inlogMaps.EventReturn | Return a object with events params. |
| object | Object | Return the object that was passed on polygon options. |
let type = 'polygon';
map.showPolygons(true, type);
| Parameters | Type | Description |
|---|---|---|
| show | Boolean | Show/hide polygon |
| type | String | Type of the polygon |
let type = 'polygon';
let options = new inlogMaps.PolygonAlterOptions();
options.fillColor = '#FFFF00';
map.alterPolygonOptions(type, options);
| Parameters | Type | Description |
|---|---|---|
| type | String | Type of the polygon. |
| options | inlogMaps.PolygonAlterOptions | Parameters of the polygon. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| weight | Number | true | Stroke width in pixels. |
| color | String | false | Stroke color. |
| opacity | Number | false | Stroke opacity. |
| fillColor | String | false | Fill color. |
| fillOpacity | Number | false | Fill opacity. |
function eventClick(polyline, event, object) {
// TODO: Do something here
}
let type = 'polyline';
let options = new inlogMaps.PolylineOptions();
options.path = [
[-23.02487, -43.48283],
[-23.02475, -43.48391],
[-23.02486, -43.48233],
[-23.02443, -43.48212],
[-23.02429, -43.48243],
[-23.02477, -43.48245]
];
options.addToMap = true;
options.fitBounds = true;
map.drawPolyline(type, options, eventClick);
| Parameters | Type | Description |
|---|---|---|
| type | String | Type of the polyline to help you find it later. |
| options | inlogMaps.PolylineOptions | Parameters of the polyline. |
| eventClick | Function | Callback function when click on polyline. eventClick params. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| path | Array | true | Expected an array of positions. [[Number, Number], [Number, Number]]. |
| addToMap | Boolean | false | Define if polyline shows on the map. Default: false. |
| fitBounds | Boolean | false | Define if the map will fit on the polyline. Default: false. |
| editable | Boolean | false | Define if polyline is editable. Default: false. |
| draggable | Boolean | false | Define if polyline is draggable on the map. Default: false. |
| color | String | false | Stroke color. |
| weight | Number | true | Stroke width in pixels. |
| object | Object | false | Is a object that will be returned in the eventClick function. |
| Parameters | Type | Description |
|---|---|---|
| marker | google.maps.Polyline or L.Polyline | Return the object of the clicked polyline. |
| event | inlogMaps.EventReturn | Return a object with events params. |
| object | Object | Return the object that was passed on polyline options. |
let type = 'polylineNavigation';
let options = new inlogMaps.PolylineNavigationOptions();
options.path = [
[-23.024657518124023, -43.48285071469786],
[-23.02484265813435, -43.48359100438597],
[-23.025441015571875, -43.48343945957663],
[-23.02518922621311, -43.48251677967551],
[-23.02535214879308, -43.482527508511566]
];
options.infowindows = [
'<h1>1</h1>',
'<h1>2</h1>',
'<h1>3</h1>',
'<h1>4</h1>',
'<h1>5</h1>'
];
options.addToMap = true;
options.weight = 8;
options.fitBounds = true;
options.navigateOptions = new inlogMaps.NavigationOptions('#0000FF');
map.drawPolylineWithNavigation(type, options);
| Parameters | Type | Description |
|---|---|---|
| type | String | Type of the polyline to help you find it later. |
| options | inlogMaps.PolylineNavigationOptions | Parameters of the polyline. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| path | Array | true | Expected an array of positions. [[Number, Number], [Number, Number]]. |
| infowindows | Array | false | Expected an array of strings. [String, String]. |
| addToMap | Boolean | false | Define if polyline shows on the map. Default: false. |
| fitBounds | Boolean | false | Define if the map will fit on the polyline. Default: false. |
| editable | Boolean | false | Define if polyline is editable. Default: false. |
| draggable | Boolean | false | Define if polyline is draggable on the map. Default: false. |
| color | String | false | Stroke color. |
| weight | Number | false | Stroke width in pixels. |
| object | Object | false | Is a object that will be returned in the eventClick function. |
| navigateOptions | inlogMaps.NavigationOptions | false | Is a object that will be returned in the eventClick function. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| color | String | false | Stroke color. Default: '#FF0000' |
| weight | Number | false | Stroke width in pixels. Default: 10 |
let type = 'polyline';
let position = [-23.024657518124023, -43.48285071469786]];
map.addPolylinePath(type, position);
| Parameters | Type | Description |
|---|---|---|
| type | String | Type of the polyline. |
| position | Array | Position of the new path. Expects array with latitude and longitude: [Number, Number]. |
map.removePolylineHighlight();
let type = 'polyline';
map.showPolyline(true, type);
| Parameters | Type | Description |
|---|---|---|
| show | Boolean | Show/hide polyline |
| type | String | Type of the polyline |
let type = 'polyline';
let options = new inlogMaps.PolylineAlterOptions(true, true, '#00FF00', 12, {
item: 'Edited'
});
map.alterPolylineOptions(type, options);
| Parameters | Type | Description |
|---|---|---|
| type | String | Type of the polyline. |
| options | inlogMaps.PolylineAlterOptions | Parameters of the polyline. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| editable | Boolean | false | Define if polyline is editable. Default: false. |
| draggable | Boolean | false | Define if polyline is draggable on the map. Default: false. |
| color | String | false | Stroke color. |
| weight | Number | false | Stroke width in pixels. |
| object | Object | false | Is a object that will be returned in the eventClick function. |
function eventClick(circle, event, object) {
// TODO: Do something here
}
let type = 'circle';
let options = new inlogMaps.CircleOptions();
options.addToMap = true;
options.center = [-25.4327193, -49.2784139];
options.radius = 100;
options.weight = 1;
options.fitBounds = true;
map.drawCircle(type, options, eventClick);
| Parameters | Type | Description |
|---|---|---|
| type | String | Type of the circle to help you find it later. |
| options | inlogMaps.CircleOptions | Parameters of the circle. |
| eventClick | Function | Callback function when click on circle. eventClick params. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| center | Array | true | Center of the circle. Expects array with latitude and longitude: [Number, Number]. |
| radius | Number | true | Radius of the circle, in meters. |
| weight | Number | true | Stroke width in pixels. |
| addToMap | Boolean | false | Define if circle shows on the map. Default: false. |
| fillOpacity | Number | false | Fill opacity. |
| fillColor | String | false | Fill color. |
| color | String | false | Stroke color. |
| opacity | Number | false | Stoker opacity. |
| draggable | Boolean | false | Define if circle is draggable on the map. Default: false. |
| editable | Boolean | false | Define if circle is editable. Default: false. |
| fitBounds | Boolean | false | Define if the map will fit on the circle. Default: false. |
| object | Object | false | Is a object that will be returned in the eventClick function. |
| Parameters | Type | Description |
|---|---|---|
| marker | google.maps.Circle or L.Circle | Return the object of the clicked circle. |
| event | inlogMaps.EventReturn | Return a object with events params. |
| object | Object | Return the object that was passed on circle options. |
let type = 'circle';
map.showCircles(true, type);
| Parameters | Type | Description |
|---|---|---|
| show | Boolean | Show/hide circle |
| type | String | Type of the circle |
let type = 'circle';
let options = new inlogMaps.CircleAlterOptions();
options.fillColor = '#FFFF00';
map.alterCircleOptions(type, options);
| Parameters | Type | Description |
|---|---|---|
| type | String | Type of the circle. |
| options | inlogMaps.CircleAlterOptions | Parameters of the circle. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| weight | Number | true | Stroke width in pixels. |
| fillOpacity | Number | false | Fill opacity. |
| fillColor | String | false | Fill color. |
| color | String | false | Stroke color. |
| opacity | Number | false | Stoker opacity. |
let options = new inlogMaps.PopupOptions(event.latlng,
'<p>Hello world!<br />This is a nice popup.</p>', marker);
map.drawPopup('marker', options);
| Parameters | Type | Description |
|---|---|---|
| type | String | Type of the popup. |
| options | inlogMaps.PopupOptions | Options of the popup. |
| Parameters | Type | Required | Description |
|---|---|---|---|
| latlng | Array | true | Position of the circle marker. Expects array with latitude and longitude: ` |
| marker | google.maps.Marker or L.Marker | false | Marker object received on events |
| content | String | true | Content of the popup. |
let data = {
'type': 'Feature',
'properties': {
'name': 'Sample',
'amenity': 'Sample Test',
'popupContent': 'You are at Inlog!'
},
'geometry': {
'type': 'Point',
'coordinates': [-49.2806026, -25.4327193]
}
};
let options = {
draggable: true,
editable: true
};
function eventClick(event) {
// TODO: Do something here
}
map.loadGEOJson(data, options, eventClick);
| Parameters | Type | Description |
|---|---|---|
| data | String | GeoJSON a ser plotado no mapa. |
| options | GEOJson Options | GeoJSON options |
| eventClick | Function | Callback function when click on the map. Returns a inlogMaps.EventReturn as param. |
| Parameters | Type | Description |
|---|---|---|
| editable | Boolean | Define if layer is editable on the map. Default: false. |
| draggable | Boolean | Define if layer is draggable on the map. Default: false. |
function eventClick(event) {
// TODO: Do something here
}
map.addClickMap(eventClick);
| Parameters | Type | Description |
|---|---|---|
| eventClick | Function | Callback function when click on the map. Returns a inlogMaps.EventReturn as param. |
map.removeClickMap();
| Parameters | Type | Description |
|---|---|---|
| latlng | Array | Clicked position. Contains latitude and longitude: [Number, Number]. |
npm run dev
FAQs
A library for using generic layer maps
The npm package @inlog/inlog-maps receives a total of 13 weekly downloads. As such, @inlog/inlog-maps popularity was classified as not popular.
We found that @inlog/inlog-maps demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.