search

kekscom / osmbuildings

OSM Buildings Classic 2.5D
http://osmbuildings.org
BSD 2-Clause "Simplified" License
505 stars 140 forks source link

Example with OpenLayers 6.4.3 #123

Closed larsurilch closed 3 years ago

larsurilch commented 3 years ago

Hello Friend, I'm using OpenLayers 6.4.3. I tried to use the OSMBuildings-OL5.js file with my JSON file without success. There is no error but no JSON data is rendered.

I used as an example the file https://github.com/kekscom/osmbuildings/blob/master/tests/openlayers-5.3.0/index.js

const data = {"type":"FeatureCollection","features":[{"type":"Feature","id":1,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.451550108,-3.895414283],[-38.451530852,-3.895392852],[-38.451525684,-3.895397484],[-38.451546906,-3.895417254],[-38.451550108,-3.895414283]]]}},{"type":"Feature","id":2,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.461184485,-3.848238015],[-38.461184485,-3.848238015],[-38.461183051,-3.84822031],[-38.461171563,-3.848221317],[-38.461173331,-3.848238933],[-38.461173331,-3.848238933],[-38.461173331,-3.848238933],[-38.461173331,-3.848238933],[-38.461184485,-3.848238015]]]}},{"type":"Feature","id":3,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.454191525,-3.906871484],[-38.454168768,-3.906873139],[-38.454169066,-3.90688655],[-38.454192126,-3.906886184],[-38.454191525,-3.906871484]]]}},{"type":"Feature","id":4,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.452126684,-3.895156448],[-38.452112297,-3.895169503],[-38.452116828,-3.895174281],[-38.452118876,-3.895172446],[-38.452128679,-3.895182806],[-38.452139889,-3.895171992],[-38.452126684,-3.895156448]]]}},{"type":"Feature","id":5,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.454046453,-3.906865192],[-38.454023612,-3.906865245],[-38.454023612,-3.906878879],[-38.454047085,-3.90688291],[-38.454046453,-3.906865192]]]}},{"type":"Feature","id":6,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.433300332,-3.877554865],[-38.433313893,-3.877544241],[-38.433301293,-3.877525098],[-38.433301293,-3.877525098],[-38.433286376,-3.877536303],[-38.433286757,-3.87753681],[-38.433300332,-3.877554865]]]}},{"type":"Feature","id":7,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.464752085,-3.875751098],[-38.464774194,-3.875755142],[-38.464776941,-3.87573481],[-38.464755235,-3.87573148],[-38.464752085,-3.875751098]]]}},{"type":"Feature","id":8,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.451681848,-3.895470006],[-38.451676165,-3.895463336],[-38.451636518,-3.895500736],[-38.451642308,-3.895506132],[-38.451680818,-3.895470947],[-38.451681848,-3.895470006]]]}},{"type":"Feature","id":9,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.44049429,-3.887534325],[-38.44048523,-3.887517985],[-38.440462443,-3.8875308],[-38.440472239,-3.887547011],[-38.44049429,-3.887534325]]]}},{"type":"Feature","id":10,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.45508312,-3.882154798],[-38.455097587,-3.882152533],[-38.455095839,-3.882140889],[-38.455100386,-3.882139944],[-38.455097587,-3.882123785],[-38.455092578,-3.882124607],[-38.455077732,-3.882127042],[-38.45508312,-3.882154798]]]}},{"type":"Feature","id":11,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.455736654,-3.881984073],[-38.455756191,-3.881980684],[-38.45575149,-3.881955243],[-38.455731844,-3.881958505],[-38.455736654,-3.881984073]]]}},{"type":"Feature","id":12,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.447902321,-3.87274149],[-38.447903031,-3.872715781],[-38.447878174,-3.87271858],[-38.447881117,-3.872742356],[-38.447902321,-3.87274149]]]}},{"type":"Feature","id":13,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.455671541,-3.882364681],[-38.455667571,-3.882347735],[-38.455634415,-3.882354601],[-38.45563765,-3.882371314],[-38.455671541,-3.882364681]]]}},{"type":"Feature","id":14,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.455223853,-3.882452314],[-38.455216448,-3.882418735],[-38.455198071,-3.882421556],[-38.455204699,-3.882456063],[-38.455223853,-3.882452314]]]}},{"type":"Feature","id":15,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.45900452,-3.879206615],[-38.458974665,-3.87921416],[-38.458980255,-3.879235138],[-38.459009342,-3.879228739],[-38.45900452,-3.879206615]]]}},{"type":"Feature","id":16,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.455813929,-3.881943555],[-38.455786337,-3.881949431],[-38.455790709,-3.881973382],[-38.455818367,-3.881968027],[-38.455813929,-3.881943555]]]}},{"type":"Feature","id":17,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.42669506,-3.8233054],[-38.426687168,-3.823282236],[-38.426658772,-3.82329083],[-38.426666806,-3.82331452],[-38.42669506,-3.8233054]]]}},{"type":"Feature","id":18,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.448122214,-3.879131455],[-38.44811473,-3.879099431],[-38.448093018,-3.879102743],[-38.448100713,-3.879136279],[-38.448122214,-3.879131455]]]}},{"type":"Feature","id":19,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.447927171,-3.87917521],[-38.447919352,-3.879146376],[-38.447895391,-3.879151311],[-38.447902041,-3.879180848],[-38.447927171,-3.87917521]]]}},{"type":"Feature","id":20,"properties":{"wallColor":"rgb(255,0,0)","roofColor":"rgb(255,128,0)","height":500,"minHeight":0},"geometry":{"type":"Polygon","coordinates":[[[-38.448248086,-3.873507309],[-38.4482234,-3.873516941],[-38.448231477,-3.873543611],[-38.448257155,-3.873534163],[-38.448248086,-3.873507309]]]}}]}

const osmBuildings = new OSMBuildings(map)
osmBuildings.set(data)

Would you like to provide an example?

Thanks