{"id":13565745,"url":"https://github.com/tomimick/mapcolorizer","last_synced_at":"2025-04-03T23:30:34.422Z","repository":{"id":11950155,"uuid":"14520716","full_name":"tomimick/mapcolorizer","owner":"tomimick","description":"Interactive choropleth Javascript map using Leaflet. Includes GeoJSON data for Finland municipalities.","archived":false,"fork":false,"pushed_at":"2023-11-19T12:18:08.000Z","size":2798,"stargazers_count":34,"open_issues_count":1,"forks_count":21,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-04T19:42:08.844Z","etag":null,"topics":["choropleth","geojson","leaflet","openstreetmap"],"latest_commit_sha":null,"homepage":"https://kuntakartta.tomicloud.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomimick.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2013-11-19T10:05:16.000Z","updated_at":"2024-04-28T03:20:16.000Z","dependencies_parsed_at":"2024-01-19T06:54:16.186Z","dependency_job_id":"9ac25720-211b-4dc5-a1d6-b05f3118da7e","html_url":"https://github.com/tomimick/mapcolorizer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomimick%2Fmapcolorizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomimick%2Fmapcolorizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomimick%2Fmapcolorizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomimick%2Fmapcolorizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomimick","download_url":"https://codeload.github.com/tomimick/mapcolorizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247097584,"owners_count":20883121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["choropleth","geojson","leaflet","openstreetmap"],"created_at":"2024-08-01T13:01:54.488Z","updated_at":"2025-04-03T23:30:33.623Z","avatar_url":"https://github.com/tomimick.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"mapcolorizer.js\n===============\n\nmapcolorizer.js is a Javascript jQuery plugin that produces an interactive\nchoropleth map: colorized polygons on top of a map that user can interact\nwith.\n\nThe plugin depends on jQuery and [Leaflet](http://leafletjs.com/).\n\n\n## Demo\n\nSee plugin live at [kuntakartta.org](http://kuntakartta.org) - the site\ndisplays statistical data of 320 communes of Finland. The site is only in\nFinnish.\n\nThe full sources to the demo site appear in the\n[site](https://github.com/tomimick/mapcolorizer/tree/master/site/) folder. The\nsite can be run locally with the Python script `run-wwwserver.sh` in the site\nfolder.\n\n![Screenshot](https://raw.github.com/tomimick/mapcolorizer/master/site/img/screenshot.png)\n\n\n## Features\n\n  * GeoJSON polygon data.\n  * JSON statistical data.\n  * Simple colorization: even color scale or 2 scales: below and above average.\n  * No background image, 1 static image or tile servers.\n  * Full screen mode.\n  * Hover shows polygon name.\n  * Click on polygon pans and zooms to it.\n  * Zoom in, out and fit to screen.\n  * Customizable via creation options.\n  * Plus features of [Leaflet](http://leafletjs.com/features.html).\n\n## Basic usage\n\nIn your HTML, include the required CSS and Javascript files:\n\n```html\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003clink rel=\"stylesheet\" href=\"css/leaflet.css\"\u003e\n        \u003clink rel=\"stylesheet\" href=\"css/mapcolorizer.css\"\u003e\n\n        \u003cscript src=\"js/jquery.min.js\"\u003e\u003c/script\u003e\n        \u003cscript src=\"js/leaflet.js\"\u003e\u003c/script\u003e\n        \u003cscript src=\"js/mapcolorizer.js\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cdiv id=\"mymap\"\u003e\u003c/div\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIn your Javascript, create a basic map with MapQuest tile server:\n\n```javascript\nvar options = {url_geoson: \"data/polygons.geojson\"};\nvar map = $(\"#mymap\").mapcolorizer(options).data(\"mapcolorizer\");\nmap.init(function() {\n    map.setTileServer(\"mapquest\");\n    map.loadData(\"data.json\");\n});\n```\n\n\n## GeoJSON polygons\n\nThe polygon coordinates are feeded in as GeoJSON.\n[GeoJSON](http://geojson.org/) is a simple, popular format based on JSON that\nis easily consumable by Javascript.\n\nThe GeoJSON file is loaded via AJAX from the specified URL.\n\nThe GeoJSON polygon `properties` must contain a `code` attribute. It\nmust be a string. This identifier is used to link the polygon to the\nstatistical data.  The name displayed on hover comes from `properties.name`.\n\n\n## Map images and tiles\n\nLeaflet provides good support for various types of map backgrounds.  The map\ncan contain just the polygons and no background. Or the map can have a single\nbackground image that is just resized on user zoom. The advantage of these is\nthat the map can be used without a tile server: no license/bandwidth issues\nand works in offline.\n\nThe third option is to use a real tile server. Popular options are\n[MapQuest](http://www.mapquest.com/),\n[OpenStreetMap](http://www.openstreetmap.org/) and\n[CloudMade](http://www.cloudmade.com/). Be aware that heavy usage of these\nservices may require licensing.\n\n\n## Statistical data\n\nThe statistical data is also in JSON format but separate from the coordinate\ndata. It's a simple JSON object that has a `code` and value for each polygon.\n\nSample data file:\n\n```javascript\n{\n    \"area738\": 18.00,\n    \"area935\": 18.50,\n    \"area211\": 17.83,\n    \"area781\": 18.00,\n    \"area263\": 18.50,\n    \"area785\": 19.00,\n    \"area700\": 16.00,\n    \"area702\": 17.75,\n    \"area178\": 18.00,\n    \"area707\": 18.50\n}\n```\n\n## Color scheme\n\nThe coloring routine is simple: when the data is loaded, the plugin calculates\nthe min/max/avg of the data and scales the data range over the given color\nscale.\n\nThere are 2 scaling modes:\n\n  * 1: evenly scale the data range over the color scale\n  * 2: two scales, green scheme below average and red scheme above average\n\nThe plugin has a built-in 9 color scheme from green to red. You may give your\nyour own colorscheme as an option during creation.\n\nMost likely the routine is a bit primitive, but you have the sources, go ahead\nand improve it!\n\n\n\n## Options\n\nHere are the options that can be given during map creation:\n\n```javascript\nvar defaults = {\n    url_geoson: \"\", // url to fetch geojson polygons\n    style_func: styleFunc, // styles for areas\n    style_hover: {weight: 3, color: \"#000\"}, // hover style\n    min_zoom: 3, // min zoom level\n    max_zoom: 9, // max zoom level\n    show_full_screen_toggle : true, // show fullscreen toggler\n    on_click: onClick, // event handler\n    on_mouse_over: onMouseOver, // event handler\n    on_mouse_out: onMouseOut, // event handler\n    scale_mode: 2, // color scale count: 1 or 2\n    color_scale: color_scale10, // array of colors\n    overlay_opacity: 1, // background image/tiles opacity\n    area_list: null // list of area ids to show, null=all\n};\n```\n\n## API\n\nThe plugin provides the following API:\n\n```javascript\n// Initialize the plugin. Callback is called when geojson is loaded.\nfunction init(cb) {}\n\n// Load JSON data. If data is a string, it is an URL to the JSON\n// file to be loaded. If data is an object, it is used directly.\n// Callback is called when data is loaded.\nfunction loadData(data, cb) {}\n\n// Set tile server type: osm,mapquest,cloudmade,custom.\n// If custom, options specifies options.\nfunction setTileServer(type, options) {}\n\n// Set a background image.\nfunction setImage(url, coords) {}\n\n// Show or hide names of polygons. The name is centered in the middle\n// of the polygon.\n// showvalue: append the data value after name.\nfunction showNames(show, showvalue) {}\n\n// Zooms to fit all polygons in map.\nfunction zoomToFit() {}\n\n// Set function that returns a JSON object that defines the\n// style of polygons.\nfunction setStyle(func) {}\n\n// Add legend for the map as HTML.\nfunction setLegend(html) {}\n\n// Let map resize itself if map size is changed.\nfunction refresh() {}\n\n// Provide access to internal objects, for quick hackability.\nfunction getSelf() {}\n```\n\nStyle options are document [here](http://leafletjs.com/reference.html#path).\n\n\n## Data-finland\n\nThis folder contains GeoJSON polygon data for Finland's 320 communes, and\nvarious statistical data in raw and JSON format.\n\n[conv.py](data-finland/data-raw/conv.py) is a Python script I used to convert\nthe raw .csv data to JSON format.\n\n\n## Browser support\n\nThe plugin should have the same browser support as\n[Leaflet](http://leafletjs.com/features.html).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomimick%2Fmapcolorizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomimick%2Fmapcolorizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomimick%2Fmapcolorizer/lists"}