Freehand Drawing

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_98":-5,"_50":16,"_99":-5,"_100":101,"_102":103},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":-5,"_26":-5,"_27":-5,"_28":16,"_29":30,"_31":-5,"_32":33},"vizInfo",{"_40":60,"_77":78,"_79":80,"_81":-7,"_82":43,"_83":41,"_84":-5,"_85":86,"_87":16,"_88":89,"_90":89,"_91":-7,"_92":-7,"_57":93,"_59":93,"_94":-5,"_95":56,"_96":97},"vizContent",{"_40":60,"_61":62},"ownerAccount",{"_40":41,"_42":43,"_44":45,"_46":39,"_47":-5,"_48":-7,"_49":-7,"_50":16,"_51":-7,"_52":39,"_53":54,"_55":56,"_57":58,"_59":58},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz","runtimeVersion","license","descriptionIsAiGenerated","sourceProvenance",{"_34":35,"_36":37,"_27":-5,"_38":39},"project","socialImageUrl","https://next.vizhub.com/images/1c9a96e7025c32f5afa0c4d471fc0d9ba7252c66706469e88db312a468f5279f.png","sourceType","gist","originalUrl","https://gist.github.com/ThomasG77/dbe3643ffd070acdfbbc48206bffc54c","author","ThomasG77","id","gist-user-thomasg77","accountType","user","email","","displayName","avatar","oauthProvider","oauthId","isAdmin","stripeCustomerId","handle","handleNormalized","thomasg77","lifecycleEmailsEnabled",true,"createdAt",1791690388506,"updatedAt","gist-dbe3643ffd070acdfbbc48206bffc54c","files",{"_63":64,"_65":66,"_67":68},"f1",{"_69":75,"_71":76},"f2",{"_69":73,"_71":74},"f3",{"_69":70,"_71":72},"name","package.json","text","{\n \"name\": \"draw-freehand\",\n \"dependencies\": {\n \"file-saver\": \"^2.0.2\",\n \"ol\": \"6.3.1\"\n },\n \"devDependencies\": {\n \"parcel\": \"1.11.0\"\n },\n \"scripts\": {\n \"start\": \"parcel index.html\",\n \"build\": \"parcel build --experimental-scope-hoisting --public-url . index.html\"\n }\n}\n","index.js","import 'ol/ol.css';\nimport Map from 'ol/Map';\nimport View from 'ol/View';\nimport Draw from 'ol/interaction/Draw';\nimport {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';\nimport {OSM, Vector as VectorSource} from 'ol/source';\nimport GeoJSON from 'ol/format/GeoJSON';\nimport {fromCircle} from 'ol/geom/Polygon';\nimport Circle from 'ol/geom/Circle';\nimport { saveAs } from 'file-saver';\n\n\n\nvar raster = new TileLayer({\n source: new OSM()\n});\n\nvar source = new VectorSource({wrapX: false});\n\nvar vector = new VectorLayer({\n source: source\n});\n\nvar map = new Map({\n layers: [raster, vector],\n target: 'map',\n view: new View({\n center: [-11000000, 4600000],\n zoom: 4\n })\n});\n\nvar typeSelect = document.getElementById('type');\nvar exportGeoJSON = document.getElementById('export');\nexportGeoJSON.addEventListener('click', function(evt) {\n console.log('clicked');\n\n var geojsonString = (new GeoJSON({dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'})).writeFeatures(source.getFeatures().map(feature => {\n var feat = feature.clone();\n if (feat.getGeometry() instanceof Circle) {\n feat.setGeometry(fromCircle(feat.getGeometry()));\n }\n return feat;\n}));\n var blob = new Blob([geojsonString], {type: \"application/ vnd.geo+json;charset=utf-8\"});\n saveAs(blob, \"export.geojson\");\n //console.log(geojsonString);\n})\n\nvar draw; // global so we can remove it later\nfunction addInteraction() {\n var value = typeSelect.value;\n if (value !== 'None') {\n draw = new Draw({\n source: source,\n type: typeSelect.value,\n freehand: true\n });\n map.addInteraction(draw);\n }\n}\n\n\n/**\n * Handle change event.\n */\ntypeSelect.onchange = function() {\n map.removeInteraction(draw);\n addInteraction();\n};\n\naddInteraction();\n","index.html","\n\n \n Freehand Drawing\n \n \n \n \n \n

\n \n \n \n \n\n","slug","dbe3643ffd070acdfbbc48206bffc54c","title","Freehand Drawing","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","CxozJdUuZvuuowcA3k10Q","startCommitId","forkedFrom","forkedFromVisibility",1593726487000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]