{"id":13426014,"url":"https://github.com/GIScience/Leaflet.Heightgraph","last_synced_at":"2025-03-15T20:31:45.533Z","repository":{"id":12549024,"uuid":"65614734","full_name":"GIScience/Leaflet.Heightgraph","owner":"GIScience","description":"Leaflet plugin to visualize height information and road attributes.","archived":false,"fork":false,"pushed_at":"2023-01-17T06:14:06.000Z","size":10719,"stargazers_count":100,"open_issues_count":46,"forks_count":43,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-15T12:08:33.301Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://giscience.github.io/Leaflet.Heightgraph","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/GIScience.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-13T11:44:35.000Z","updated_at":"2024-10-15T21:38:25.000Z","dependencies_parsed_at":"2023-02-10T08:00:19.952Z","dependency_job_id":null,"html_url":"https://github.com/GIScience/Leaflet.Heightgraph","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GIScience%2FLeaflet.Heightgraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GIScience%2FLeaflet.Heightgraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GIScience%2FLeaflet.Heightgraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GIScience%2FLeaflet.Heightgraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GIScience","download_url":"https://codeload.github.com/GIScience/Leaflet.Heightgraph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243725631,"owners_count":20337670,"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":[],"created_at":"2024-07-31T00:01:24.275Z","updated_at":"2025-03-15T20:31:45.485Z","avatar_url":"https://github.com/GIScience.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Leaflet.Heightgraph\n\nThis plugin is inspired by [MrMufflon/Leaflet.Elevation](https://github.com/MrMufflon/Leaflet.Elevation).\nYou may use this plugin to view an interactive height profile of linestring segments using d3js.\nThe input data may consist of different types of attributes you wish to display.\n\n![height_graph](https://user-images.githubusercontent.com/23240110/88930276-8efd5980-d27b-11ea-9b85-f6a864417f38.png)\n\nSupported Browsers:\n- Chrome\n- Firefox\n- Opera\n\n[Demo](https://giscience.github.io/Leaflet.Heightgraph)\n\n## Installation\n\nPrerequisite:  [`node`](https://nodejs.org/en/download/) (version \u003e=8)\nor use [`nvm`](https://github.com/nvm-sh/nvm/blob/master/README.md) to install specific node versions\n\nInstall Leaflet.Heightgraph and dependencies with npm.\n```\nnpm install leaflet.heightgraph\n```\n\n## Import\n\nYou can import the required libraries in the head of your index.html file\n```html\n \u003clink rel=\"stylesheet\" href=\"node_modules/leaflet/dist/leaflet.css\" /\u003e\n \u003cscript src=\"node_modules/leaflet/dist/leaflet.js\"\u003e\u003c/script\u003e\n \u003clink rel=\"stylesheet\" href=\"src/L.Control.Heightgraph.css\"/\u003e\n \u003cscript type=\"text/javascript\" src=\"src/L.Control.Heightgraph.js\"\u003e\u003c/script\u003e\n```\n\nWhen using NPM you can require all needed libraries like this.\n```\nrequire('leaflet');\nrequire('leaflet.heightgraph');\n```\n\nAfter importing Leaflet correctly, ES 6 Module import is possible as well:\n```html\n\u003cscript type=\"module\"\u003e\n    import 'leaflet.heightgraph'\n\u003c/script\u003e\n```\n\nThe stylesheet can alternatively be imported in a style tag:\n```html\n\u003cstyle\u003e\n    @import \"../node_modules/leaflet.heightgraph/dist/L.Control.Heightgraph.min.css\";\n\u003c/style\u003e\n```\n\n## Usage\nInitialize the heightgraph, add it to your Leaflet map object and add your\nData to the heightgraph object.\n```javascript\nlet hg = L.control.heightgraph();\nhg.addTo(map);\nhg.addData(geojson);\nL.geoJson(geojson).addTo(map);\n```\n\n## Supported data\nInput data has to be of type [GeoJSON-Format](http://geojson.org/).\nThis must consist of feature collection(s) corresponding to a certain\nattribute which could be e.g. *surface* or *gradient* information.\n\nEach `FeatureCollection` comprises a certain `attribute` in its `properties`\n(e.g. `'summary': 'steepness'`) and has a list of `LineString` features.\nThese should have `coordinates` including height values and the `attributeType`\nwhich corresponds to the certain type of attribute within this segment\n(in this case it could be an index of steepness) declared in its `properties`.\n\nNotice that the list of coordinates has to start with the last coordinate\nof the previous `LineString`.\n\n```javascript\nconst FeatureCollections = [{\n    \"type\": \"FeatureCollection\",\n    \"features\": [{\n        \"type\": \"Feature\",\n        \"geometry\": {\n            \"type\": \"LineString\",\n            \"coordinates\": [\n                [8.6865264, 49.3859188, 114.5],\n                [8.6864108, 49.3868472, 114.3],\n                [8.6860538, 49.3903808, 114.8]\n            ]\n        },\n        \"properties\": {\n            \"attributeType\": \"3\"\n        }\n    }, {\n        \"type\": \"Feature\",\n        \"geometry\": {\n            \"type\": \"LineString\",\n            \"coordinates\": [\n                [8.6860538, 49.3903808, 114.8],\n                [8.6857921, 49.3936309, 114.4],\n                [8.6860124, 49.3936431, 114.3]\n            ]\n        },\n        \"properties\": {\n            \"attributeType\": \"0\"\n        }\n    }],\n    \"properties\": {\n        \"Creator\": \"OpenRouteService.org\",\n        \"records\": 2,\n        \"summary\": \"Steepness\"\n    }\n}];\n```\n\n## Optional settings\nThese additional options can be set to customize your heightgraph.\nUse them by passing an options object to the heightgraph during creation e.g.:\n```js\nlet options = {\n    position: \"topleft\"\n}\nlet hg = L.control.heightgraph(options);\n```\n\n### position\nYou can choose between `\"bottomright\"`, `\"bottomleft\"`, `\"topright\"` and `\"topleft\"`\nfor the position on the map.\n\ndefault: `position: \"bottomright\"`\n\n### width\nThe width of the expanded heightgraph display in pixels.\n\ndefault: `width: 800`\n\n### height\nThe height of the expanded heightgraph display in pixels.\n\ndefault: `height: 280`\n\n### margins\nThe margins define the distance between the border of the heightgraph\nand the actual graph inside. You are able to specify margins for `top`, \n`right`, `bottom` and `left` in pixels.\n\ndefault:\n```\nmargins: {\n    top: 10,\n    right: 30,\n    bottom: 55,\n    left: 50\n}\n```\n\n### expand\nBoolean value that defines if the heightgraph should be expanded on creation.\n\ndefault: `true`\n\n### expandControls\nBoolean value that defines if the expand controls (i.e. toggle and close) should be visible.\nTo be set to false when the heightgraph is embedded in another component\nand that controls when and how the heightgraph is expanded.\n\ndefault: `true`\n\n### expandCallback\nFunction to be called if the heightgraph is expanded or reduced. The state of\nthe heightgraph is passed as an argument. It is `true` when expanded and\n`false` when reduced.\n\ndefault: `undefined`\n\nexample:\n```js\nexpandCallback: function(expanded){\n    console.log(\"Expanded: \" + expanded)\n}\n```\n\n### mappings\nYou may add a mappings object to customize the colors and labels in the height graph.\nWithout adding custom mappings the segments and labels within the graph will be displayed in random colors.\nEach key of the object must correspond to the `summary` key in `properties` within the `FeatureCollection`.\n\ndefault: `undefined`\n\nExample:\n\n```javascript\ncolorMappings.Steepness = {\n    '3': {\n        text: '1-3%',\n        color: '#F29898'\n    },\n    '0': {\n        text: '4-6%',\n        color: '#E07575'\n    }\n};\n```\n\n### highlightStyle\nYou can customize the highlight style when using the horizontal line to \nfind parts of the route above an elevation value.\nUse any [Leaflet Path options](https://leafletjs.com/reference-1.5.0.html#path-option)\nas value of the `highlightStyle` parameter.\n\ndefault: `highlightStyle:{color: 'red'}`\n\nExample:\n```javascript\nhighlightStyle = {\n   weight: 10,\n   opacity: 0.8,\n   color: 'orange'\n }\n```\n\n### graphStyle\nAllows customizing the style of the height graph.\nYou may specify the [\u003cpath\u003e element presentation attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path) in the form of a JavaScript object.\nNote that in case of conflict the `mappings` attributes take precedence over the `graphStyle` attributes.\n\ndefault: `graphStyle: {}`\n\nExample:\n```javascript\ngraphStyle: {\n    opacity: 0.8,\n    'fill-opacity': 0.5,\n    'stroke-width': '2px'\n};\n```\n\n### translation\nYou can change the labels of the heightgraph info field by passing translations\nfor `distance`, `elevation`, `segment_length`, `type` and `legend`.\n\ndefault:\n```\ntranslation: {\n    distance: \"Distance\",\n    elevation: \"Elevation\",\n    segment_length: \"Segment length\",\n    type: \"Type\",\n    legend: \"Legend\"\n    }\n```\n\n### xTicks\nOverwrite automatic tick handling for x axis and specify the tick frequency in the *x axis* of the graph. Corresponds approximately to \n2 to the power of `value` ticks.\n\ndefault: `xTicks: 3`\n\n### yTicks\nOverwrite automatic tick handling for y axis and specify the tick frequency in the *y axis* of the graph. Corresponds approximately to \n2 to the power of `value` ticks.\n\ndefault: `yTicks: 3`\n\n## Methods\nThe following methods are available on a created `L.control.heightgraph` instance,\nrepresented by `hg` in the examples.\n\n### mapMousemoveHandler\nUsed together with mapMouseoutHandler.\nTakes a mousemove event as input `hg.mapMousemoveHandler(event)` to show\nthe current position on the heightgraph when hovering over the respective\ngeometry on the map.\nThe marker on the map can be disabled by passing an object with properties\n`showMapMarker:false` as second argument. `showMapMarker` is `true` by default.\n```js\nhg.mapMousemoveHandler(mousemoveEvent, {showMapMarker: false})\n```\nCheck [example.js](/example/example.js) for an implementation example.\n\n\n### mapMouseoutHandler\nUsed together with mapMousemoveHandler.\nResponsible for removing the created markers again.\nYou can pass a timeout in milliseconds to delay the removal.\nThe default timeout is `1000`.\n```js\nhg.mapMouseoutHandler(0)\n```\nCheck [example.js](/example/example.js) for an implementation example.\n\n### resize\nUse this to resize the heightgraph container including the graph to the\nspecified extent by passing an object including defined `width` and `height`\nproperties in pixel values:\n```js\nhg.resize({width: 1000, height: 300})\n```\n\n## Development setup\n\n```bash\n# clone the repository\n$ git clone https://github.com/GIScience/Leaflet.Heightgraph.git\n\n# install dependencies using a node-version \u003e= 8\n$ npm install\n\n# start development server\n$ npm start\n```\n\n## Configurations (WebStorm)\n\nYou can create run configurations for different tasks:\n\n### Starting development server\n\n- open `Run -\u003e Edit Configurations...`\n- click `+` to add a new configuration and choose the npm template\n- give the Configuration a name e.g. `Dev`\n- choose `start` as command\n- press `OK`\n\n### Testing\n\nDebug jasmine tests with karma in WebStorm\n\n- open `Run -\u003e Edit Configurations...`\n- click `+` to add a new configuration and choose the karma template\n- give the Configuration a name e.g. `Test`\n- press `OK`\n\n### Coverage\n\nRun karma with coverage\n\n- once you have a karma task configured just click the run with coverage button \n- analyse coverage in Webstorm or Browser (open ./coverage/html/index.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGIScience%2FLeaflet.Heightgraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGIScience%2FLeaflet.Heightgraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGIScience%2FLeaflet.Heightgraph/lists"}