aqicn.org

progressive loading json

16 block X 500 cities = 8000 cities



https://wind.waqi.info/mapq/block/10/500/

https://wind.waqi.info/mapq/block/2/10/

idx = 2 x 10 n = 10

"count":8475,"idx":20,"n":10}

------------------------------------

http://www.google-analytics.com/ga.js

------------------------------

marker icon 

256 is label

15 is size

256.1.png is small icon

http://waqi.info/mapicon/256.15.png

==========================================================

Better solution is svg icon, you can change text, color, style on the fly

http://iatkin.github.io/leaflet-svgicon/

https://github.com/w8r/leaflet-labeled-circle

google map material icons is better.

https://material.io/icons/

=========================================================

-----------------------------------

3449 is site index max is 8475,

https://waqi.info/api/mapib/@00003449/info.json

will give you statistic pic in html tag

===================================================

https://github.com/scottdejonge/map-icons

svg icon on google map

Do you want to reduce redundancy for Google Maps marker images? Our Front-end Developer Robert Katzki found out how you could embed an SVG file into the Google Maps API. 

For a Google Maps based project (the web version of Boschung RWIS app) with a lot of similar markers, I was looking for a way to reduce redundancy for these marker images. The marker images look all the same, only differing in the background color. Also there is a gradient and a drop shadow included. That would be a perfect use case for a SVG symbol sprite!

The problem

Sadly the Google Maps API doesn’t allow us to use a SVG sprite as a marker image. No matter what you try – the  method or specifying an external file like markers.svg#my-icon – the marker won’t show up on the map. 

The solution

When I stumbled across Fun with SVG: Embedding in CSS, an article explaining how to embed an SVG file in CSS, I got interested. Will that work with the Maps API, too? Indeed – it does work!
new google.maps.Marker({
  position: myLatlng,
  map: map,
  icon: {
    anchor: new google.maps.Point(16, 16),
    url: 'data:image/svg+xml;utf-8, \
      '
  }
});




Notice that you can use line breaks, when you escape them.

Maps API doesn’t like special characters (# especially), though. It doesn’t render the marker at all when that character is somewhere in the SVG. Defining a dropshadow via url (#dropshadow) does not work initially. Trick is, to use encodeURIComponent to escape all these characters.

As we have our SVG in JavaScript now, it is easy to construct it dynamically. In the next example the source SVG is in the DOM and loaded via JavaScript as text. For the background I used a placeholder that can be replaced with the actual color value. Notice the gradient and the drop shadow:





A drawback of this solution is having the paths in the DOM or in the JavaScript. Using a plain SVG symbol sprite would be my preferred solution. Still, we keep our code DRY and maintain paths only once.

This article first appeared here: robert.katzki.de/posts/inline-svg-as-google-maps-marker

Learn more about the usage of Google Maps API

For a Google Maps based project with a lot of similar markers, I was looking for a way to reduce redundancy for these marker images. The marker images look all the same, only differing in the background color. Also there is a gradient and a drop shadow included. That would be a perfect use case for a SVG symbol sprite!

The problem

Sadly the Google Maps API doesn’t allow us to use a SVG sprite as a marker image. No matter what you try – the  method or specifying an external file like markers.svg#my-icon – the marker won’t show up on the map.

The solution

When I stumbled across Fun with SVG: Embedding in CSS, an article explaining how to embed an SVG file in CSS, I got interested. Will that work with the Maps API, too? Indeed – it does work!
new google.maps.Marker({
  position: myLatlng,
  map: map,
  icon: {
    anchor: new google.maps.Point(16, 16),
    url: 'data:image/svg+xml;utf-8, \
      '
  }
});


==============================================================



What D3.js is Not

26 May 2014

I have played with D3.js quite a bit recently. After exploring its API and building a rather complex chart, I come to realize that I have misunderstood D3 for a long time. It’s not only me, after talking to my friends, they also have misconceptions regarding D3. So I’ve decided to write this post to clear some of the common misunderstandings.

D3 is Not a Charting Library

When you go to D3 homepage, you can see lots of amazing charts and visualizations. But D3 is not a charting library like Highcharts, Chart.js or Google Charts. You cannot simply pass in your dataset, specify the type of the chart you need and get a fancy chart. D3 is much lower level than that. There are charting libraries build on D3, e.g. nvd3, Rickshaw

D3 is Not a Graphics Layer

D3 is not a graphics layer - in fact, most of its graphic power comes from SVG. D3 essentially provides a data friendly API for manipulating SVG (or even HTML, since they are all XML based markup language), it does not “draw” the graphics itself - the heavy-lifting of the representation is done by SVG.

D3 is Not a SVG Polyfill

Unlike Raphaël, which provides polyfill for SVG on browsers that do not support SVG. D3 manipulates SVG directly, without any abstraction layer. Your browser needs to support SVG for D3 to work properly.

D3 Does Not Support Canvas or WebGL (Almost)

Even though some of the D3 API (like d3.geo.path()) can work with both SVG and Canvas, most of its API is designed for SVG. If you are looking for Canvas Library, check out Paper.js, Fabric.js and EaselJS. Three.js is a decent library for WebGL.

D3 is Not Designed to Work With AngularJS

AngularJS has its own DOM manipulation API (data binding). And So does D3. To make the two work together, one of them has to take control on DOM. You can either use an AngularJS directive and pass the DOM to D3, which will do its magic, or only use the data transformation API of D3 and let AngularJS deal with DOM. However, either way, you ended up not utilizing a large part of API of either framework.

But D3 is Awesome

After playing with D3 for a while, I would define D3 as a data visualization tool, in the sense that its API has two parts: data and visualization. D3 comes with lots of handy utilities for processing data (array, time series, geo data), which is quite useful by itself. Its powerful visualization API makes it easy to bind, not only data, but also its transformation to documentation.

D3 is not very easy to learn. So when you start, it’s important to have an adequate expectation. Also, get your hands dirty early and work your way through.