ThinkGeo Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== ThinkGeo StyleJSON Schema ======


<div msgbox>
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. </div>

<markdown>
StyleJSON is a describable [cartographic](https://en.wikipedia.org/wiki/Cartography) styling language in the [JSON](http://www.json.org/) 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.
</markdown>

===== 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.  

<div dokuteaser>
>[[Map Suite StyleJson Quick Start Guide|Quick Start Guide]]
Helps you get you up to speed with integrating the ThinkGeo StyleJSON schema with your mapping solution.
</div>


===== Product Guides =====

<div dokuteaser>
> [[thinkgeo StyleSJON Package guide|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 [[thinkgeo cloud|Cloud Service]].
</div>




===== 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:

<code JavaScript>

<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>

</code>

==== NPM ====

  * Install the package:

<code JavaScript>
npm i vectormap-icons
</code>


  * 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,

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


===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.
User Tools

Site Tools

Page Tools
