Search code examples
google-mapsgoogle-maps-api-3react-native-maps

whether google map kml file for javascript API and android/ios API are different?


I am working in the react-native-maps, I have imported a KML file that I have used for Javascript API that is not working for react-native-maps KML.

But in react-native-maps, when I am using this link(https://pastebin.com/raw/jAzGpq1F from their example) it is working.

<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document id="root_doc">
<Schema name="20171123121441_ULA_PARCIAL" id="20171123121441_ULA_PARCIAL">
    <SimpleField name="timestamp" type="string"></SimpleField>
    <SimpleField name="begin" type="string"></SimpleField>
    <SimpleField name="end" type="string"></SimpleField>
    <SimpleField name="altitudeMode" type="string"></SimpleField>
    <SimpleField name="tessellate" type="int"></SimpleField>
    <SimpleField name="extrude" type="int"></SimpleField>
    <SimpleField name="visibility" type="int"></SimpleField>
    <SimpleField name="drawOrder" type="int"></SimpleField>
    <SimpleField name="icon" type="string"></SimpleField>
</Schema>
<Folder><name>20171123121441_ULA_PARCIAL</name>
  <Placemark>
    <name>Teste KML</name>
    <description>AQUI VAI FICAR A DESCRIÇÃO DO MARKER</description>
    <ExtendedData><SchemaData schemaUrl="#20171123121441_ULA_PARCIAL">
      <SimpleData name="tessellate">-1</SimpleData>
      <SimpleData name="extrude">0</SimpleData>
      <SimpleData name="visibility">-1</SimpleData>
    </SchemaData></ExtendedData>
    <Point>
      <coordinates>-48.2830592,-18.9193508</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Teste com HTML</name>
    <description>
      <![CDATA[
        <h1>CDATA Tags are useful!</h1>
        <p><font color="red">Text is <i>more readable</i> and 
        <b>easier to write</b> when you can avoid using entity 
        references.</font></p>
      ]]>
    </description>
    <Style>
      <IconStyle>
        <Icon>
          <href>https://image.ibb.co/e5z4eG/flag_blue.png</href>
        </Icon>
      </IconStyle>
    </Style>
    <ExtendedData><SchemaData schemaUrl="#20171123121441_ULA_PARCIAL">
      <SimpleData name="tessellate">-1</SimpleData>
      <SimpleData name="extrude">0</SimpleData>
      <SimpleData name="visibility">-1</SimpleData>
    </SchemaData></ExtendedData>
    <Point>
      <coordinates>-48.289805,-18.913945</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Custom</name>
    <description>AQUI VAI FICAR A DESCRIÇÃO DO MARKER</description>
    <Style>
      <IconStyle>
        <Icon>
          <href>https://image.ibb.co/e5z4eG/flag_blue.png</href>
        </Icon>
      </IconStyle>
    </Style>
    <ExtendedData>
      <SchemaData schemaUrl="#20171123121441_ULA_PARCIAL">
        <SimpleData name="tessellate">-1</SimpleData>
        <SimpleData name="extrude">0</SimpleData>
        <SimpleData name="visibility">-1</SimpleData>
      </SchemaData>
    </ExtendedData>
    <Point>
      <coordinates>-48.28328,-18.915815</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Custom</name>
    <description>AQUI VAI FICAR A DESCRIÇÃO DO MARKER</description>
    <Style>
      <IconStyle>
        <color>7f00ffff</color>
      </IconStyle>
    </Style>
    <ExtendedData>
      <SchemaData schemaUrl="#20171123121441_ULA_PARCIAL">
        <SimpleData name="tessellate">-1</SimpleData>
        <SimpleData name="extrude">0</SimpleData>
        <SimpleData name="visibility">-1</SimpleData>
      </SchemaData>
    </ExtendedData>
    <Point>
      <coordinates>-48.278833,-18.919549</coordinates>
    </Point>
  </Placemark>
</Folder>
</Document></kml>

Below KML file used in the Javascript API:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <Style id="transBluePoly">
      <LineStyle>
        <width>1.5</width>
      </LineStyle>
      <PolyStyle>
        <color>7dff0000</color>
      </PolyStyle>
    </Style>
    <Placemark>
      <name>Building 41</name>
      <styleUrl>#transBluePoly</styleUrl>
      <Polygon>
        <extrude>1</extrude>
        <altitudeMode>relativeToGround</altitudeMode>
        <outerBoundaryIs>
          <LinearRing>
            <coordinates> -122.0857412771483,37.42227033155257,17
              -122.0858169768481,37.42231408832346,17
              -122.085852582875,37.42230337469744,17
              -122.0858799945639,37.42225686138789,17
              -122.0858860101409,37.4222311076138,17
              -122.0858069157288,37.42220250173855,17
              -122.0858379542653,37.42214027058678,17
              -122.0856732640519,37.42208690214408,17
              -122.0856022926407,37.42214885429042,17
              -122.0855902778436,37.422128290487,17
              -122.0855841672237,37.42208171967246,17
              -122.0854852065741,37.42210455874995,17
              -122.0855067264352,37.42214267949824,17
              -122.0854430712915,37.42212783846172,17
              -122.0850990714904,37.42251282407603,17
              -122.0856769818632,37.42281815323651,17
              -122.0860162273783,37.42244918858722,17
              -122.0857260327004,37.42229239604253,17
              -122.0857412771483,37.42227033155257,17 
            </coordinates>
          </LinearRing>
        </outerBoundaryIs>
      </Polygon>
    </Placemark>
  </Document>
</kml>

What is the difference between Google Maps KML file for javascript API and android/ios API?


Solution

  • I have found that the few KML Element is not supported in the Android SDK. I have got the details from the below reference.

    Both KML file are same, but few elements are not supported in the android-sdk.

    https://developers.google.com/maps/documentation/android-sdk/utility/kml#supported

    Thanks.