User Tools

Site Tools

Trace:

Sidebar

ThinkGeo Cloud

ThinkGeo UI Controls

ThinkGeo Open Source

Help and Support

External Resources

thinkgeo_webfonts

This is an old revision of the document!

Table of Contents

ThinkGeo StyleJSON Schema

The ThinkGeo StyleJSON Schemai llustrated “GettingStarted” Guide will guide you through the process of studying what is ThinkGeo StylJSON Schema, and how to use it in your desktop, web, or mobile mapping applications.

StyleJSON is a describable cartographic styling language in the JSON format, which is similar to working with a Cascading Style Sheet for styling webpages. It defines the visual appearance of a map - what data should be drawn, the drawing sequence, and how to style the data when drawing it. Taking advantage of StyleJSON will allow you to add a great-looking map to your project in minutes, a browser, a phone, a tablet, or even a watch.

Getting Started

It's very easy to get started. You can start from getting the samples from GitHub, or start from creating a new application in your Visual Studio.

Quick Start Guide

Helps you get you up to speed with integrating the ThinkGeo StyleJSON schema with your mapping solution.

Product Guides

Package & Installation Guide

Guide on how to create your own credentials to easily consume map tiles, geocode and reverse geocode, perform spatial operations and other GIS services from Cloud Service.

Packages

2 endpoints are provided to allow you to install StyleJSON into your application, including “Develop” (Not encrypted and compressed, for debug purpose) and “Deployment” (Encrypted and compressed) .

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
  • Use it in HTML page:

To use Vector Map Icons as your POI icons, you need to link to the CSS in the “&lt;head&gt;” 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>

Notes

i. It can be used as a stand-along resource

• Here is the public CDN:

o https://cdn.thinkgeo.com/vectormap-icons/0.1.0/thinkgeo-font.css

o https://cdn.thinkgeo.com/vectormap-icons/0.1.0/webfontloader.js

o https://cdn.thinkgeo.com/vectormap-icons/0.1.0/thinkgeo-font.woff

o https://cdn.thinkgeo.com/vectormap-icons/0.1.0/thinkgeo-font.eot

o https://cdn.thinkgeo.com/vectormap-icons/0.1.0/thinkgeo-font.svg

o https://cdn.thinkgeo.com/vectormap-icons/0.1.0/thinkgeo-font.ttf

o https://cdn.thinkgeo.com/vectormap-icons/0.1.0/thinkgeo-font.woff2

• More info:

o It can be used as font-awesome, Material Design Icons, Google Material Design Icons etc. Just like a regular web font for icons. You can use it in any html pages, even in JavaScript libraries. You can get the docs on how to use it from these pages as well, for example, https://dev.materialdesignicons.com/getting-started .

o It’s available on ThinkGeo CDN and NPM. Similar stuffs and detailed description can be available from MapBox, see https://www.mapbox.com/maki-icons/ . You can edit it in the website, then download it for local use. That’s the reason why I would like add a page in https://thinkgeo.com

ii. Doc: we need one doc page on wiki

iii. It’s open sourced on GitHub here: https://github.com/ThinkGeo/VectorMap-icons

• Good to have: attach the css class name of each icon in the page.

thinkgeo_webfonts.1550134835.txt.gz · Last modified: 2019/02/14 09:00 by johnnyz

Page Tools