Simple SVG / andreaskdk

andreaskdk

Workspace

Public

Edited

Jan 1, 2023

Fork of Simple SVG

1 star

htl.html`<svg width=${width} height=${height}>

</g>

</g>

</svg>`

a4=[0.21, 0.297]

maaleforhold=300

a4size={

return [a4[0]*maaleforhold, a4[1]*maaleforhold];

}

foer=htl.html`<svg viewBox="0 0 ${210*3} ${297*3}"

height="297mm"

width="210mm">

<text transform="translate(100 70)" >Situationsplan før</text>

<text transform="rotate(180) scale(-0.1,0.1)">målestok 1:${maaleforhold}</text>

</g>

</g>

</g>

</svg>`

DOM.download(() => serialize(foer), "før.svg", "Save før")

efter=htl.html`<svg viewBox="0 0 ${210*3} ${297*3}"

height="297mm"

width="210mm">

<text transform="translate(100 70)" >Situationsplan efter</text>

<text transform="rotate(180) scale(-0.1,0.1)">målestok 1:${maaleforhold}</text>

</g>

</g>

</g>

</svg>`

DOM.download(() => serialize(efter), "efter.svg", "Save efter")

afstand_til_skel=htl.html`<svg viewBox="0 0 ${210*3} ${297*3}"

height="297mm"

width="210mm">

<text transform="translate(100 30)" >Afstand til skel og det skrå højdegrænseplan</text>

<text transform="rotate(180) scale(-0.1,0.1)">målestok 1:${maaleforhold}</text>

</g>

</g>

</g>

</g>

</svg>`

DOM.download(() => serialize(afstand_til_skel), "afstand_til_skel.svg", "Save afstand til skel")

lovligg=htl.html`<svg viewBox="0 0 ${210*3} ${297*3}"

height="297mm"

width="210mm">

<text transform="translate(100 70)" >Situationsplan</text>

<text transform="rotate(180) scale(-0.1,0.1)">målestok 1:${maaleforhold}</text>

</g>

</g>

</g>

</svg>`

DOM.download(() => serialize(lovligg), "lovlig.svg", "Save lovliggørelse")

nyt_udhus={

let c=[[12.42000000004191,38.933999999426305],[11.069999999948777,45.56399999931455],[3.3399999999674037,43.993999999947846],[4.680000000051223,37.364000000059605],[12.42000000004191,38.933999999426305]]

let l=Math.sqrt(Math.pow(c[1][0]-c[0][0],2)+Math.pow(c[1][1]-c[0][1],2))

let udhus_l=4.2;

let south_vec=[-(c[1][0]-c[0][0])/l, -(c[1][1]-c[0][1])/l]

var s="M"+c[1][0]+","+c[1][1]

+"L"+(c[1][0]+udhus_l*south_vec[0])+","+(c[1][1]+udhus_l*south_vec[1])

+"L"+(c[2][0]+udhus_l*south_vec[0])+","+(c[2][1]+udhus_l*south_vec[1])

+"L"+c[2][0]+","+c[2][1]

+" Z"

return s

}

tilbygning_str= {

let c=[[12.660000000032596,41.0339999999851],[12.479999999981374,30.98399999924004]];

let midpoint=[(c[0][0]+c[1][0])/2, (c[0][1]+c[1][1])/2]

let l=Math.sqrt(Math.pow(c[0][0]-c[1][0],2)+ Math.pow(c[0][1]-c[1][1],2))

let north_vec=[(c[0][0]-c[1][0])/l, (c[0][1]-c[1][1])/l]

let west_vec=[-north_vec[1], north_vec[0]]

let udestue_size=[4.7, 8.5]

var s="M"+(udestue_size[0]/2*north_vec[0]+midpoint[0])+","+(udestue_size[0]/2*north_vec[1]+midpoint[1])

+ "L"+(udestue_size[0]/2*north_vec[0]+midpoint[0]+udestue_size[1]*west_vec[0])+","+(udestue_size[0]/2*north_vec[1]+midpoint[1]+udestue_size[1]*west_vec[1])

+ "L"+(-udestue_size[0]/2*north_vec[0]+midpoint[0]+udestue_size[1]*west_vec[0])+","+(-udestue_size[0]/2*north_vec[1]+midpoint[1]+udestue_size[1]*west_vec[1])

+ "L"+(-udestue_size[0]/2*north_vec[0]+midpoint[0])+","+(-udestue_size[0]/2*north_vec[1]+midpoint[1])

+" Z"

return s

}

l={

let c=[[4.3950000000186265,0], [34.241000000038184,0.0139999995008111]]

let l=Math.sqrt(Math.pow(c[0][0]-c[1][0],2)+Math.pow(c[0][1]-c[1][1], 2))

return l;

}

height = 900

d3 = require("d3-geo@1")

husstr={

let d=huse[6].geometry.coordinates[0].map( y=> [y[0]-matrikel.bbox[0], y[1]-matrikel.bbox[1]])

let scale_x=1

let scale_y=1

var s="M"+d[0][0]/scale_x+","+d[0][1]/scale_y;

for(let i=1; i<d.length; i++) {

s=s+"L"+d[i][0]/scale_x+","+d[i][1]/scale_y;

}

s+=" Z";

return s;

}

carportstr={

let d=huse[1].geometry.coordinates[0].map( y=> [y[0]-matrikel.bbox[0], y[1]-matrikel.bbox[1]])

let scale_x=1

let scale_y=1

var s="M"+d[0][0]/scale_x+","+d[0][1]/scale_y;

for(let i=1; i<d.length; i++) {

s=s+"L"+d[i][0]/scale_x+","+d[i][1]/scale_y;

}

s+=" Z";

return s;

}

skurstr={

let d=huse[2].geometry.coordinates[0].map( y=> [y[0]-matrikel.bbox[0], y[1]-matrikel.bbox[1]])

let scale_x=1

let scale_y=1

var s="M"+d[0][0]/scale_x+","+d[0][1]/scale_y;

for(let i=1; i<d.length; i++) {

s=s+"L"+d[i][0]/scale_x+","+d[i][1]/scale_y;

}

s+=" Z";

return s;

}

udhusstr={

let d=huse[3].geometry.coordinates[0].map( y=> [y[0]-matrikel.bbox[0], y[1]-matrikel.bbox[1]])

let scale_x=1

let scale_y=1

var s="M"+d[0][0]/scale_x+","+d[0][1]/scale_y;

for(let i=1; i<d.length; i++) {

s=s+"L"+d[i][0]/scale_x+","+d[i][1]/scale_y;

}

s+=" Z";

return s;

}

huse=[

{

"type": "Feature",

"geometry": {

"type": "Polygon",

"crs": {

"type": "name",

"properties": {

"name": "EPSG:25832"

}

"coordinates": [

[

716252.04,

6185444.81

[

716254.88,

6185447.24

[

716255.14,

6185450.47

[

716254.37,

6185451.15

[

716251.35,

6185452.58

[

716248.07,

6185450.3

[

716248.56,

6185446.19

[

716252.04,

6185444.81

]

"properties": {

"ændret": "2022-05-30T11:36:54.000Z",

"visueltcenter_x": 716251.605,

"visueltcenter_y": 6185448.695,

"id": "1005605556",

"bbrbygning_id": "37bf3cc2-8770-4108-8154-5d779a3ea6e2",

"bygningstype": "Bygning",

"metode3d": "Tag",

"målested": "Tag",

"synlig": true,

"overlap": false

"bbox": [

716248.07,

6185444.81,

716255.14,

6185452.58

]

}, {

"type": "Feature",

"geometry": {

"type": "Polygon",

"crs": {

"type": "name",

"properties": {

"name": "EPSG:25832"

}

"coordinates": [

[

716286.69,

6185481.44

[

716289.09,

6185478.98

[

716290.5,

6185480.36

[

716291.29,

6185479.56

[

716294.15,

6185482.37

[

716293.54,

6185482.99

[

716295.94,

6185485.35

[

716293.76,

6185487.57

[

716291.9,

6185485.74

[

716291.5,

6185486.16

[

716286.69,

6185481.44

]

"properties": {

"ændret": "2015-03-13T10:32:55.000Z",

"visueltcenter_x": 716291.315,

"visueltcenter_y": 6185483.275,

"id": "1005624446",

"bbrbygning_id": "73ede555-7b79-4641-919d-10b7988c1ec7",

"bygningstype": "Bygning",

"metode3d": "Tag",

"målested": "Tag",

"synlig": true,

"overlap": false

"bbox": [

716286.69,

6185478.98,

716295.94,

6185487.57

]

}, {

"type": "Feature",

"geometry": {

"type": "Polygon",

"crs": {

"type": "name",

"properties": {

"name": "EPSG:25832"

}

"coordinates": [

[

716274.79,

6185454.33

[

716274.88,

6185459.61

[

716272.33,

6185459.65

[

716272.24,

6185454.37

[

716274.79,

6185454.33

]

"properties": {

"ændret": "2015-03-13T10:32:55.000Z",

"visueltcenter_x": 716273.56,

"visueltcenter_y": 6185456.99,

"id": "1005616232",

"bbrbygning_id": null,

"bygningstype": "Bygning",

"metode3d": "Tag",

"målested": "Tag",

"synlig": true,

"overlap": false

"bbox": [

716272.24,

6185454.33,

716274.88,

6185459.65

]

}, {

"type": "Feature",

"geometry": {

"type": "Polygon",

"crs": {

"type": "name",

"properties": {

"name": "EPSG:25832"

}

"coordinates": [

[

716283.29,

6185461.76

[

716281.94,

6185468.39

[

716274.21,

6185466.82

[

716275.55,

6185460.19

[

716283.29,

6185461.76

]

"properties": {

"ændret": "2015-03-13T10:32:55.000Z",

"visueltcenter_x": 716278.75,

"visueltcenter_y": 6185464.29,

"id": "1005611443",

"bbrbygning_id": "bc7d0e7b-bbaa-413b-afd1-9397c5e03ad0",

"bygningstype": "Bygning",

"metode3d": "Tag",

"målested": "Tag",

"synlig": true,

"overlap": false

"bbox": [

716274.21,

6185460.19,

716283.29,

6185468.39

]

}, {

"type": "Feature",

"geometry": {

"type": "Polygon",

"crs": {

"type": "name",

"properties": {

"name": "EPSG:25832"

}

"coordinates": [

[

716320.65,

6185445.21

[

716323.04,

6185445.34

[

716322.54,

6185453.01

[

716320.15,

6185452.85

[

716320.65,

6185445.21

]

"properties": {

"ændret": "2015-03-13T10:32:55.000Z",

"visueltcenter_x": 716321.595,

"visueltcenter_y": 6185449.11,

"id": "1071907777",

"bbrbygning_id": "869b708a-751a-4797-a0e8-5ef153a97fae",

"bygningstype": "Bygning",

"metode3d": "Tag",

"målested": "Tag",

"synlig": true,

"overlap": false

"bbox": [

716320.15,

6185445.21,

716323.04,

6185453.01

]

}, {

"type": "Feature",

"geometry": {

"type": "Polygon",

"crs": {

"type": "name",

"properties": {

"name": "EPSG:25832"

}

"coordinates": [

[

716323.41,

6185453.07

[

716322.73,

6185463.51

[

716319.21,

6185463.29

[

716317.98,

6185461.73

[

716318.26,

6185457.5

[

716304.4,

6185456.6

[

716305.08,

6185446.17

[

716305.45,

6185446.2

[

716305.56,

6185444.42

[

716320.65,

6185445.21

[

716320.15,

6185452.85

[

716322.54,

6185453.01

[

716323.04,

6185445.34

[

716323.45,

6185445.36

[

716323.35,

6185446.84

[

716323.64,

6185446.85

[

716323.49,

6185449.24

[

716325.25,

6185449.35

[

716325,

6185453.17

[

716323.41,

6185453.07

]

"properties": {

"ændret": "2015-03-13T10:32:55.000Z",

"visueltcenter_x": 716313.348,

"visueltcenter_y": 6185450.982,

"id": "1071909267",

"bbrbygning_id": "52b12789-f152-4806-b29b-743e6e1e8f11",

"bygningstype": "Bygning",

"metode3d": "Tag",

"målested": "Tag",

"synlig": true,

"overlap": false

"bbox": [

716304.4,

6185444.42,

716325.25,

6185463.51

]

}, {

"type": "Feature",

"geometry": {

"type": "Polygon",

"crs": {

"type": "name",

"properties": {

"name": "EPSG:25832"

}

"coordinates": [

[

716298.75,

6185453.54

[

716298.93,

6185463.59

[

716283.53,

6185463.86

[

716283.35,

6185453.81

[

716298.75,

6185453.54

]

"properties": {

"ændret": "2015-03-13T10:32:55.000Z",

"visueltcenter_x": 716291.14,

"visueltcenter_y": 6185458.7,

"id": "1005613002",

"bbrbygning_id": "28b89934-94be-4ea6-8288-af85eaeccbca",

"bygningstype": "Bygning",

"metode3d": "Tag",

"målested": "Tag",

"synlig": true,

"overlap": false

"bbox": [

716283.35,

6185453.54,

716298.93,

6185463.86

]

}]

matrikel=({"type":"Feature","geometry":{"type":"Polygon","crs":{"type":"name","properties":{"name":"EPSG:25832"}},"coordinates":[[[716275.885,6185474.377],[716270.87,6185471.486],[716275.265,6185422.826],[716290.189,6185422.999],[716305.111,6185422.84],[716298.634,6185488.462],[716291.258,6185485.645],[716286.687,6185481.523],[716281.723,6185477.613],[716275.885,6185474.377]]]},"crs":{"type":"name","properties":{"name":"EPSG:25832"}},"properties":{"ændret":"2018-11-14T22:55:58.827Z","geo_ændret":"2015-02-27T16:52:11.657Z","geo_version":1,"visueltcenter_x":716288.526,"visueltcenter_y":6185440.482,"ejerlavkode":12751,"matrikelnr":"14zl","kommunekode":"0159","kommunenavn":"Gladsaxe","sognekode":"7132","sognenavn":"Bagsværd","regionskode":"1084","regionsnavn":"Region Hovedstaden","retskredskode":"1109","retskredsnavn":"Retten i Glostrup","udvidet_esrejendomsnr":"1590016978","esrejendomsnr":"16978","sfeejendomsnr":"2088448","bfenummer":2088448,"ejerlavnavn":"Bagsværd","featureid":"929253","fælleslod":false,"moderjordstykke":null,"registreretareal":1677,"arealberegningsmetode":"o","vejareal":0,"vejarealberegningsmetode":"b","vandarealberegningsmetode":"ukendt"},"bbox":[716270.87,6185422.826,716305.111,6185488.462]})

matrikel.geometry.coordinates[0].map( y=> [y[0]-matrikel.bbox[0], y[1]-matrikel.bbox[1]])

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"BFEnummer":2088448,"arbejderbolig":false,"bygningPaaFremmedGrund":[],"ejerlejlighed":[],"erFaelleslod":false,"forretningshaendelse":"Afledt ændring","sekundaerForretningshaendelse":[],"forretningsomraade":"52.20.05","forretningsproces":"Anden sagskategori","hovedejendomOpdeltIEjerlejligheder":false,"id_lokalId":"2088448","id_namespace":"http://data.gov.dk/Matriklen/SamletFastEjendom","jordstykke":[{"type":"Jordstykke","properties":{"arealberegningsmetode":"Areal beregnet efter opmåling - o","arealbetegnelse":null,"arealtype":null,"brugsretsareal":false,"centroide":[{"geometri":"POINT(716286.529 6185449.102)","senesteSagLokalId":"7446333","status":"Gældende"}],"delnummer":null,"ejerlavskode":12751,"ejerlavsnavn":"Bagsværd","faelleslod":false,"forretningshaendelse":"Afledt ændring","sekundaerForretningshaendelse":[],"forretningsomraade":"52.20.05","forretningsproces":"Anden sagskategori","fredskov":{"fredskovsareal":null,"omfang":null},"id_lokalId":"929253","id_namespace":"http://data.gov.dk/Matriklen/Jordstykke","jordrente":{"omfang":null},"klitfredning":{"klitfredningsareal":null,"omfang":null},"kommuneLokalId":"0159","majoratskov":{"majoratskovsnummer":null,"omfang":null},"matrikelnummer":"14zl","paataenktHandling":null,"regionLokalId":"1084","registreretAreal":1677,"registreringFra":"2018-06-03T06:43:33.441919+02:00","registreringTil":null,"registreringsaktoer":"Matriklen","samletFastEjendomBFEnummer":2088448,"senesteSagLokalId":"7446333","skelforretningssagsLokalId":null,"sognLokalId":"7132","stammerFraJordstykkeLokalId":null,"status":"Gældende","stormfald":[],"strandbeskyttelse":{"omfang":null,"strandbeskyttelsesareal":null},"supplerendeMaalingSagLokalId":null,"vandarealinkludering":"ukendt","vejareal":"0","vejarealberegningsstatus":"vejareal beregnet","virkningFra":"1953-03-16T00:00:00.000000+01:00","virkningTil":null,"virkningsaktoer":"Geodatastyrelsen"}}],"landbrugsnotering":null,"paataenktHandling":null,"registreringFra":"2018-06-03T07:24:43.596127+02:00","registreringTil":null,"registreringsaktoer":"Matriklen","senesteSagLokalId":"7446333","status":"Gældende","udskiltVej":false,"virkningFra":"1953-03-16T00:00:00.000000+01:00","virkningTil":null,"virkningsaktoer":"Geodatastyrelsen"}}]}

{"SFE":[{"Grunde":[{"Jordstykker":[{"Id":"78f5b889-4ee6-4c04-b658-73df34762b83","Status":"7"}],"Bygninger":[{"TekniskeAnlaeg":[],"Etage":[{"Nybyggeri":false,"Id":"55ab4cea-e60c-415c-9a04-8aba14a7dbdf","Status":"6"}],"Opgange":[{"Nybyggeri":false,"Id":"ae566779-aecb-4a16-a11d-e1e1fe88daf2","Status":"6"}],"Enheder":[{"Opgang":"ae566779-aecb-4a16-a11d-e1e1fe88daf2","Etage":"55ab4cea-e60c-415c-9a04-8aba14a7dbdf","Fordelingsarealer":[],"TekniskeAnlaeg":[],"Nybyggeri":false,"Id":"0b2f1afd-6256-4f31-b1e7-89aabdbe1148","Status":"6"}],"Jordstykke":"78f5b889-4ee6-4c04-b658-73df34762b83","Nybyggeri":false,"Id":"28b89934-94be-4ea6-8288-af85eaeccbca","Status":"6"},{"TekniskeAnlaeg":[],"Etage":[],"Opgange":[],"Enheder":[],"Jordstykke":"78f5b889-4ee6-4c04-b658-73df34762b83","Nybyggeri":false,"Id":"bc7d0e7b-bbaa-413b-afd1-9397c5e03ad0","Status":"6"},{"TekniskeAnlaeg":[],"Etage":[],"Opgange":[],"Enheder":[],"Jordstykke":"78f5b889-4ee6-4c04-b658-73df34762b83","Nybyggeri":false,"Id":"73ede555-7b79-4641-919d-10b7988c1ec7","Status":"6"}],"TekniskeAnlaeg":[{"Jordstykke":"78f5b889-4ee6-4c04-b658-73df34762b83","Nybyggeri":false,"Id":"5d6cf759-5516-4339-8b35-3890e39790a3","Status":"6"},{"Jordstykke":"78f5b889-4ee6-4c04-b658-73df34762b83","Nybyggeri":false,"Id":"bf1e3a3e-4fc0-4c34-969f-bb3ae9d1cfac","Status":"10"}],"Id":"4c9407de-9be1-4a58-90b5-9871d11344a9","Status":"7"}],"Id":"52a95646-cbd0-4168-8fc1-80289a795527","Status":"7"}],"BPFG":[],"Ejerlejlighed":[]}

[{"datafordelerOpdateringstid":"2021-04-03T05:06:24.368049+02:00","bfeNummer":2088448,"ejendommensEjerforholdskode":"10","ejendomsnummer":16978,"ejendomstype":"1","forretningshændelse":"EjendomsRelation","forretningsområde":"54.15.05.05","forretningsproces":"0","id_lokalId":"52a95646-cbd0-4168-8fc1-80289a795527","id_namespace":"http://data.gov.dk/bbr/ejendomsrelation","kommunekode":"0159","registreringFra":"2017-06-02T14:29:37.000000+02:00","registreringsaktør":"BBR","samletFastEjendom":"2088448","status":"7","virkningFra":"2009-11-24T03:01:05.000000+01:00","virkningsaktør":"Konvertering2017"}]

htl.html`<svg width=${width} height=${height}>

</g>

</g>

</svg>`

mur_str={

let l=1.8

let vec=[3.9200000000419095-4.010000000009313,31.50399999972433-36.7839999999851]

return "M3.9200000000419095,31.50399999972433L"+ (3.92-l*vec[0])+"," +(31.504-l*vec[1])+" Z"

}

rand={

return ["M12.612082803047992,38.35862316890764L4.113445807725395,38.51083756288575 Z",

"M4.029280201643381,33.811591224295604L12.527917196965978,33.6593768303175 Z"]

}

tilbygning_str

serialize = {

const xmlns = "http://www.w3.org/2000/xmlns/";

const xlinkns = "http://www.w3.org/1999/xlink";

const svgns = "http://www.w3.org/2000/svg";

return function serialize(svg) {

svg = svg.cloneNode(true);

const fragment = window.location.href + "#";

const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);

while (walker.nextNode()) {

for (const attr of walker.currentNode.attributes) {

if (attr.value.includes(fragment)) {

attr.value = attr.value.replace(fragment, "#");

}

svg.setAttributeNS(xmlns, "xmlns", svgns);

svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);

const serializer = new window.XMLSerializer;

const string = serializer.serializeToString(svg);

return new Blob([string], {type: "image/svg+xml"});

};

}

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more