{"id":19423242,"url":"https://github.com/atomjoy/openlayers-map-marker","last_synced_at":"2026-02-28T22:04:37.875Z","repository":{"id":233902520,"uuid":"788001096","full_name":"atomjoy/openlayers-map-marker","owner":"atomjoy","description":"How to create a simple map with a marker and popup using OpenLayers? How to add a marker to OpenLayers map?","archived":false,"fork":false,"pushed_at":"2024-06-28T09:07:45.000Z","size":2588,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T04:32:24.644Z","etag":null,"topics":["map-marker","map-marker-openlayers","map-marker-popup","map-polygon","openlayers-map-marker","openlayers-map-marker-popup","openlayers-maps"],"latest_commit_sha":null,"homepage":"https://github.com/atomjoy/openlayers-map-marker","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atomjoy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-17T15:33:25.000Z","updated_at":"2024-06-28T09:07:48.000Z","dependencies_parsed_at":"2024-04-17T16:51:05.469Z","dependency_job_id":"4aea92a4-b7cf-4806-b8fb-45a4b2a18d95","html_url":"https://github.com/atomjoy/openlayers-map-marker","commit_stats":null,"previous_names":["atomjoy/openlayers-map-marker"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/atomjoy/openlayers-map-marker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fopenlayers-map-marker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fopenlayers-map-marker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fopenlayers-map-marker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fopenlayers-map-marker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atomjoy","download_url":"https://codeload.github.com/atomjoy/openlayers-map-marker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomjoy%2Fopenlayers-map-marker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29953212,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T18:42:55.706Z","status":"ssl_error","status_checked_at":"2026-02-28T18:42:48.811Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["map-marker","map-marker-openlayers","map-marker-popup","map-polygon","openlayers-map-marker","openlayers-map-marker-popup","openlayers-maps"],"created_at":"2024-11-10T13:37:30.483Z","updated_at":"2026-02-28T22:04:32.864Z","avatar_url":"https://github.com/atomjoy.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OpenLayers map marker with popup\n\nHow to create a simple map with a marker and popup using OpenLayers? How to add a marker to OpenLayers map? OpenLayers map marker with popup. Create marker with geolocation or double click. Delivery area with polygon. Multiple markers with html popups. Animated markers.\n\n# Libs\n\n```html\n\u003c!-- OpenLayers map --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/ol@v9.2.4/dist/ol.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/ol@v9.2.4/ol.css\"\u003e\n```\n\n## Map file contains\n\n- Add image marker to map\n- Show map popup on click\n- Create marker on double click\n- Clear all layer markers on double click\n- Create map polygon from points array  \n- Create delivery area, export polygon\n- Test delivery area with polygon\n- Search location from address (geolocation)\n- Animate marker, marker highlight (ontop)\n- Animate marker popup\n- Multiple tags with popups from an array or database\n  \n## Map marker, geolocation or onclick\n\nMap marker onclick \u003chttps://github.com/atomjoy/openlayers-map-marker/blob/master/map-marker-click.html\u003e.\n\n\u003cimg src=\"https://raw.githubusercontent.com/atomjoy/openlayers-map-marker/main/img/map-marker-polygon-click.png\" width=\"100%\"\u003e\n\n## Delivery area with polygon\n\nCreate, load or edit polygon sample. Load polygon in json format. Download polygon file \u003chttps://github.com/atomjoy/openlayers-map-marker/blob/master/map-polygon.html\u003e.\n\n\u003cimg src=\"https://raw.githubusercontent.com/atomjoy/openlayers-map-marker/main/img/map-polygon.png\" width=\"100%\"\u003e\n\n## Map multipe markers\n\nMultiple tags with popups from an array or database \u003chttps://github.com/atomjoy/openlayers-map-marker/blob/master/map-multiple-markers.html\u003e.\n\n\u003cimg src=\"https://raw.githubusercontent.com/atomjoy/openlayers-map-marker/master/img/map-marker-multi.png\"  width=\"100%\"\u003e\n\n## Important\n\nSet map div height.\n\n```css\nmap {\n  float: left; \n  width: 100%;\n  height: 400px;\n}\n```\n\n### Check if the point (coordinates) is inside the polygon\n\n```js\n/*\n    Test delivery area coordinates\n    var coordinate = [21.002902, 52.22885]\n    var polygon_points = [[20.57, 53.30], [21.24, 53.30], [22.152810, 52.648142], [21.24, 52], [20.50, 52], [19.785212, 52.783446]];\n*/\n\nfunction PointInPolygon(coordinate, polygon_points_array)\n{\n    var polygon = new ol.geom.Polygon([polygon_points_array]);\n    var out = polygon.intersectsCoordinate(coordinate);\n    return out;\n}\n```\n\n## Map version\n\n```sh\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css\" type=\"text/css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js\"\u003e\u003c/script\u003e\n\nhttps://github.com/openlayers/openlayers.github.io/tree/main/dist/en\nhttps://raw.githubusercontent.com/openlayers/openlayers.github.io/main/dist/en/v6.4.3/build/ol.js\nhttps://raw.githubusercontent.com/openlayers/openlayers.github.io/main/dist/en/v6.4.3/css/ol.css\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomjoy%2Fopenlayers-map-marker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatomjoy%2Fopenlayers-map-marker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomjoy%2Fopenlayers-map-marker/lists"}