neoMap

neoMap allow OpenMaps integration in your apps using LeafLet JS library:

Sample Apps:
https://visualneo.com/tutorials/neomap
https://visualneo.com/tutorials/neomap2

Description

The neoMap plugin for VisualNEO Web integrates interactive maps into applications using the Leaflet.js library, providing customizable, responsive map displays. This plugin is ideal for applications needing location data visualization, route planning, or geographic data representation. Here’s a summary of its main functionalities and practical applications:

Basic Map Initialization

The neoMapInitialize command sets up a map within a specified container using predefined map tile providers, allowing you to define the initial view and zoom levels.

Command: neoMapInitialize
Syntax: neoMapInitialize "containerId" lat lon thezoom themaxzoom "mapkind"

containerId: The ID of the container where the map displays.
lat and lon: Latitude and longitude to center the map.
thezoom: Initial zoom level.
themaxzoom: Maximum allowed zoom level.
mapkind: Map tile provider (e.g., OpenStreetMap).

Example:

neoMapInitialize "mapContainer" 40.7128 -74.0060 12 18 "osm"

This sets up a map centered on New York City at zoom level 12.

Custom Tile Providers

For more control, neoMapInitializeAdvanced allows custom map providers by specifying URLs and attributions, useful for applications needing specialized map tiles.

Adding Markers and Overlays

The plugin supports placing markers and other shapes on the map, such as circles, polygons, and GeoJSON data. These elements are interactive, allowing popups and event-based interactions.

Commands:

neoMapAddMarker: Adds a marker at specified coordinates.
neoMapAddCircle: Draws a circle with defined radius and styling.
neoMapAddGeoJSON: Adds complex shapes and features using GeoJSON objects.

Example for Marker:

neoMapAddMarker "mapContainer" "locationMarker" "blue" 40.7128 -74.0060 true "NYC Landmark"

This places a draggable blue marker in New York City with a popup title "NYC Landmark."

Map Interactions and Events

The plugin enables various user interactions:

neoMapZoomControl: Adds zoom controls to the map.
neoMapPanBy and neoMapFlyTo: Provide panning and animated zoom transitions to specific coordinates.
neoMapEvent: Allows attaching custom events like clicks to markers and shapes.

Example:

neoMapFlyTo "mapContainer" 34.0522 -118.2437 10

This smoothly transitions the map view to Los Angeles at zoom level 10.

Practical Applications

The neoMap plugin is suitable for:

Geolocation Applications: Mapping user or business locations.
Travel and Logistics: Planning routes or displaying regions.
Data Visualization: Representing geographic data, like population density or climate zones.

With customizable markers, controls, and map tile options, the neoMap plugin enhances location-based applications by providing interactive, visual map displays directly within VisualNEO Web.

neoMapInitialize

Purpose:

Add a new map from predefined providers

Category:

neoMap

Syntax:

neoMapInitialize "containerId" lat lon thezoom themaxzoom "mapkind

containerId

Select a Container object

lat

Latitude

lon

Longitude

thezoom

Zoom level

themaxzoom

Max allowed zoom (ie: 18)

"mapkind

Select map tiles origin"

neoMapInitializeAdvanced

Purpose:

Add a new map with custom provider

Category:

neoMap

Syntax:

neoMapInitializeAdvanced "containerId" lat lon thezoom themaxzoom ""osmUrl" "osmAttrib"

containerId

Select a Container object

lat

Latitude

lon

Longitude

thezoom

Zoom level

themaxzoom

Max zoom level

"osmUrl

Provider URL (ie: ""https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"")"

osmAttrib

Attribution and copyright notices

neoMapAddMarker

Purpose:

Add a new marker to a map

Category:

neoMap

Syntax:

neoMapAddMarker "containerId" "mname" iconColor lat lon setdraggable "thetitle"

containerId

Select a Container object

mname

Marker name (optional)

iconColor

Marker color

lat

Latitude

lon

Longitude

setdraggable

Draggable

thetitle

Popup marker text (optional)

neoMapAddCircle

Purpose:

Add a circle to a map

Category:

neoMap

Syntax:

neoMapAddCircle "containerId" "mname" lat lon radius "linecolor" "fillcolor" opacity "thetitle"

containerId

Select a Container object

mname

Marker name (optional)

lat

Latitude

lon

Longitude

radius

Radius (meters)

linecolor

Line color (ie: red)

fillcolor

Fill color (ie: blue)

opacity

Opacity (0-1)

thetitle

Popup marker text (optional)

neoMapAddCircleMarker

Purpose:

Add a circle marker to a map

Category:

neoMap

Syntax:

neoMapAddCircleMarker "containerId" "mname" lat lon radius "linecolor" "fillcolor" opacity "thetitle"

containerId

Select a Container object

mname

Marker name (optional)

lat

Latitude

lon

Longitude

radius

Radius (pixels)

linecolor

Line color (ie: red)

fillcolor

Fill color (ie: blue)

opacity

Opacity (0-1)

thetitle

Popup marker text (optional)

neoMapAddImage

Purpose:

Add an image to a map

Category:

neoMap

Syntax:

neoMapAddImage "containerId" "mname" imageURL lat1 lon1 lat2 lon2 "thetitle"

containerId

Select a Container object

mname

Image name (optional)

imageURL

Image URL

lat1

Latitude (upper left)

lon1

Longitude (upper left)

lat2

Latitude (lower right)

lon2

Longitude (lower right)

thetitle

Popup text (optional)

neoMapAddLine

Purpose:

Add a line to a map

Category:

neoMap

Syntax:

neoMapAddLine "containerId" "mname" lat1 lon1 lat2 lon2 linewidth "linecolor" theopacity

containerId

Select a Container object

mname

Line name (optional)

lat1

Latitude 1

lon1

Longitude 1

lat2

Latitude 2

lon2

Longitude 2

linewidth

Line width

linecolor

Line color (ie: red)

theopacity

Opacity (0-1)

neoMapAddPolygon

Purpose:

Add a polygon to a map

Category:

neoMap

Syntax:

neoMapAddPolygon "containerId" "mname" [points] "linecolor" "fillcolor" opacity "thetitle"

containerId

Select a Container object

mname

Polygon name (optional)

points

Points (Array of arrays with latitude and longitude)

linecolor

Line color (ie: red)

fillcolor

Fill color (ie: blue)

opacity

Opacity (0-1)

thetitle

Popup marker text (optional)

neoMapAddGeoJSON

Purpose:

Add a GeoJSON object to a map

Category:

neoMap

Syntax:

neoMapAddGeoJSON "containerId" "mname" [theobject] "thestyle"

containerId

Select a Container object

mname

Marker name (optional)

theobject

GeoJSON object variable

thestyle

Style object

neoMapClosePopup

Purpose:

Close a map object popup

Category:

neoMap

Syntax:

neoMapClosePopup "containerId" "mname"

containerId

Select a Container object

mname

Marker name

neoMapDisablePan

Purpose:

Disable or enable user panning

Category:

neoMap

Syntax:

neoMapDisablePan "containerId" isDisabled

containerId

Select a Container object

isDisabled

Disable user map panning?

neoMapEvent

Purpose:

Adds an event to the map

Category:

neoMap

Syntax:

neoMapEvent "containerId" eventName subroutine

containerId

Select a Container object

eventName

Event name

subroutine

Subroutine (get latitude and longitude)

neoMapFitBounds

Purpose:

Sets a map view that contains the given geographical bounds with the maximum zoom level possible.

Category:

neoMap

Syntax:

neoMapFitBounds "containerId" lati1 longi1 lati2 longi2

containerId

Select a Container object

lati1

Latitude 1

longi1

Longitude 1

lati2

Latitude 2

longi2

Longitude 2

neoMapFlyTo

Purpose:

Set map view with a smooth animation

Category:

neoMap

Syntax:

neoMapFlyTo "containerId" lat lon thezoom

containerId

Select a Container object

lat

Latitude

lon

Longitude

thezoom

Zoom level

neoMapGetCenterPosition

Purpose:

Get map center position

Category:

neoMap

Syntax:

neoMapGetCenterPosition "containerId" theLat theLng

containerId

Select a Container object

theLat

Variable to store latitude

theLng

Variable to store longitude

neoMapGetDistance

Purpose:

Get distance between two points in meters

Category:

neoMap

Syntax:

neoMapGetDistance lati1 lngi1 lati2 lngi2 [myvar]

lati1

Latitude 1

lngi1

Longitude 1

lati2

Latitude 2

lngi2

Longitude 2

myvar

Var to store result

neoMapGetMarkerPosition

Purpose:

Get marker position

Category:

neoMap

Syntax:

neoMapGetMarkerPosition "containerId" "mname" theLat theLong

containerId

Select a Container object

mname

Marker name

theLat

Variable to store latitude

theLong

Variable to store longitude

neoMapGetZoom

Purpose:

Get zoom level

Category:

neoMap

Syntax:

neoMapGetZoom "containerId" [zoomLevel]

containerId

Select a Container object

zoomLevel

Zoom level

neoMapLocateView

Purpose:

Set map view to current user location

Category:

neoMap

Syntax:

neoMapLocateView "containerId" thezoom

containerId

Select a Container object

thezoom

Zoom level

neoMapMarkerEvent

Purpose:

Adds an event to a Marker, Circle, Polygon, Image or geoJSON object.

Category:

neoMap

Syntax:

neoMapMarkerEvent "containerId" "mname" eventName subroutine

containerId

Select a Container object

mname

Marker name

eventName

Event name

subroutine

Subroutine (get latitude, longitude and marker name)

neoMapMaxZoom

Purpose:

Set maximum zoom level

Category:

neoMap

Syntax:

neoMapMaxZoom "containerId" zoomLevel

containerId

Select a Container object

zoomLevel

Zoom level

neoMapMinZoom

Purpose:

Set lower zoom level

Category:

neoMap

Syntax:

neoMapMinZoom "containerId" zoomLevel

containerId

Select a Container object

zoomLevel

Zoom level

neoMapMoveMarker

Purpose:

Move a marker to a given position

Category:

neoMap

Syntax:

neoMapMoveMarker "containerId" "mname" lat lon

containerId

Select a Container object

mname

Marker name (optional)

lat

Latitude

lon

Longitude

neoMapOpenPopup

Purpose:

Open a map object popup

Category:

neoMap

Syntax:

neoMapOpenPopup "containerId" "mname"

containerId

Select a Container object

mname

Marker name

neoMapPanBy

Purpose:

Pans the map by a given number of pixels (animated).

Category:

neoMap

Syntax:

neoMapPanBy "containerId" xdesp ydesp

containerId

Select a Container object

xdesp

X distance

ydesp

Y distance

neoMapPixelsToPosition

Purpose:

Conversion from x,y pixel coordiantes to latitude, longitude

Category:

neoMap

Syntax:

neoMapPixelsToPosition "containerId" posx posy lati longi

containerId

Select a Container object

posx

X position

posy

Y position

lati

Variable to store latitude

longi

Variable to store longitude

neoMapPositionToPixels

Purpose:

Conversion from latitude and longitude to x,y pixel coordiantes

Category:

neoMap

Syntax:

neoMapPositionToPixels "containerId" lati longi posx posy

containerId

Select a Container object

lati

Latitude

longi

Longitude

posx

Variable to store X position

posy

Variable to store Y position

neoMapRemove

Purpose:

Remove map from Container

Category:

neoMap

Syntax:

neoMapRemove "containerId"

containerId

Select a Container object

neoMapRemoveMarker

Purpose:

Remove a Marker, Circle, Polygon, Image or GeoJSON map object

Category:

neoMap

Syntax:

neoMapRemoveMarker "containerId" "mname"

containerId

Select a Container object

mname

Marker name

neoMapSetMaxBounds

Purpose:

Restricts the map view to the given bounds

Category:

neoMap

Syntax:

neoMapSetMaxBounds "containerId" lati1 longi1 lati2 longi2

containerId

Select a Container object

lati1

Latitude 1

longi1

Longitude 1

lati2

Latitude 2

longi2

Longitude 2

neoMapSetMaxBoundsToCurrentView

Purpose:

Restricts the map view to the current view

Category:

neoMap

Syntax:

neoMapSetMaxBoundsToCurrentView "containerId"

containerId

Select a Container object

neoMapSetView

Purpose:

Set map view

Category:

neoMap

Syntax:

neoMapSetView "containerId" lat lon thezoom

containerId

Select a Container object

lat

Latitude

lon

Longitude

thezoom

Zoom level

neoMapSetZoom

Purpose:

Set zoom level

Category:

neoMap

Syntax:

neoMapSetZoom "containerId" zoomLevel

containerId

Select a Container object

zoomLevel

Zoom level

neoMapWorldView

Purpose:

Set map view to the complete world

Category:

neoMap

Syntax:

neoMapWorldView "containerId"

containerId

Select a Container object

neoMapZoomControl

Purpose:

Control if a zoom control is added to the map

Category:

neoMap

Syntax:

neoMapZoomControl "containerId" isZoom

containerId

Select a Container object

isZoom

Show zoom controls?

Created with the Personal Edition of HelpNDoc: Easy to use tool to create HTML Help files and Help web sites

©2025 SinLios Soluciones Digitales. All rights reserved. VisualNEO Web™, VisualNEO Win™ and PixelNEO™ are trademarks of SinLios Soluciones Digitales. All other brand or product names are trademarks of their respective holders.