1.8 KiB
title, docs-libs, description, summary
| title | docs-libs | description | summary | |||
|---|---|---|---|---|---|---|
| Vector Maps |
|
Interactive guide to creating vector maps with jsVectorMap. | Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap. |
Installation
To use vector maps in your project, you need to include the jsVectorMap library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the jsVectorMap library from a CDN:
<script src="{{ cdnUrl }}/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
<script src="{{ cdnUrl }}/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
Default map
Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
{% include "ui/map-vector.html" map-id="empty" %}
{{ script }}
Sample demo
Look at the example below to see how the vector map works with a world map.
{% capture html -%} {% include "ui/map-vector.html" map-id="world" %} {{ script }} {%- endcapture %} {% include "docs/example.html" html=html %}
Markers
You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
{% capture html -%} {% include "ui/map-vector.html" map-id="world-markers" %} {{ script }} {%- endcapture %} {% include "docs/example.html" html=html %}
Lines
You can also draw lines on the map to represent routes or connections between different locations. Below is a sample implementation for a world map with lines:
{% capture html -%} {% include "ui/map-vector.html" map-id="world-lines" %} {{ script }} {%- endcapture %} {% include "docs/example.html" html=html %}