ThinkGeo Mapping Icons

A point of interest, or POI, is a specific point location that someone may find useful or interesting. An example is a point on the Earth representing the location of the Space Needle, or a point on Mars representing the location of the martian mountain, Olympus Mons.

Compared with traditional map providers, where native image files, like bitmap, PNG, JPEG etc. are drawn on the map for representing the POIs; Map Suite VectorMap.js supports using "Font-set" as POI icons. "Map Suite Icon Font-set" was created by ThinkGeo as an icon set made for map designers. It includes hundreds of icons for common points of interest, such as stores, parks, schools, and so on. Each icon is available in SVG format and other font format such as *.ttf, *.woff, *.eot and *.woff2.

Let's take a look at an example using "Map Suite Icon Font-set" and see how it can enhance your map creation.

Install

2 options are provided as following to use in your project.

CDN

Load from CDN in your project:

<script src="https://cdn.thinkgeo.com/vectormap-icons/1.0.0/webfontloader.js"></script>
<script>
    WebFont.load({
        custom: {
            families: ["vectormap-icons"],
            urls: ["https://cdn.thinkgeo.com/vectormap-icons/1.0.0/vectormap-icons.css"]
        }
    });
</script>

NPM

  • Install the package:
    npm i vectormap-icons

After installed successfully, you can find the related files under your project as shown below:

Use it in HTML page

To use Vector Map Icons as your POI icons, you need to link to the CSS in the "<head>" section of html page. Just like below,

    <script src="./node_modules/mapsuite/fonts/webfontloader.js"></script>
    <script>
        WebFont.load({
            custom: {
                families: ["ThinkgeoFont"],
                urls: ["./node_modules/mapsuite/fonts/icon.css"]
            }
        });
    </script>

Use it as POI icon in StyleJSON File

To use Font-set as POI icons, you have to set the following specifications:

  1. set "point-type" to "glyph"

    "point-type": "glyph"

  2. set "point-glyph" to "(font family)"

    "point-glyph": "(font family)"

  3. set "point-glyph-name" to "(font unicode)"

    "point-glyph-name": "(font unicode)"

Let's take "hospital" and "golf" for example, its Vector StyleJson should be,

    {
        "id": "poi_font",
        "filter": "layerName='poi_label'",
        "point-type": "glyph",
        "point-glyph": "ThinkgeoFont",
        "point-size": 22,
        "style": [
            {
                "filter": "maki='hospital'",
                "point-fill": "#111",
                "point-glyph-name": "\ue0a0"
            },
            {
                "filter": "maki='golf'",
                "point-fill": "#111",
                "point-glyph-name": "\ue08b"
            }
        ]
    }

After all these changes, refresh the map in browser, the map should look like as following:

Please move to icon page to see more details about the ThinkGeoFont.

results matching ""

    No results matching ""